Как исправить ошибку чтения props в React Navigation?

Question

[Сергей Золотарёв]

Добрый день!
Недавно я столкнулся с этим:

TypeError: Cannot read properties of undefined (reading 'jumpTo')

onPress
/home/head/Desktop/Серега Младший/ITProjects/wccnavigator/pages/stores.tsx:17
14 |
15 | Категории
16 | {
> 17 | return this.props.navigation.jumpTo('CurrentCategory',{cat: item.ID})}>{item.Category}
| ^ 18 | }} />
19 |
20 |

Пример кода, при нажатии на фрагмент которого возникла данная проблема:

import React, {Component} from 'react';
import { FlatList, Text, View } from 'react-native';
import { BottomTabNavigator, NavigationScreenProp } from 'react-navigation';
import { StoresFeed } from '../handlers/stores/homepage/Feed';
import { StoreListService } from '../services/stores/homepage/List';

export interface StoresProps {
      navigation: NavigationScreenProp<any,any>
}
export class Stores extends Component<StoresProps, object>{
	render(){
		return (
			<React.Fragment>
				<View style={screenStyle.list}>
					<Text style={pageStyle.feedList}>Категории</Text>
					<FlatList data={catList} renderItem={({item} : {item: any}) => {
						return <Text style={pageStyle.LCList} onPress={() => this.props.navigation.jumpTo('CurrentCategory',{cat: item.ID})}>{item.Category}</Text>
					}} />
				</View>
			</React.Fragment>
		);
	}
}

const pageStyle = new StoresFeed('ui-change',0).eventStart(),
      screenStyle = new StoresFeed('ui-change',1).eventStart();

const catList = new StoreListService('categories', null).eventStart();

Во всём моем проекте на TypeScript используется React Navigation с привязанным навигатором внизу шаблона. Сам вопрос коснулся не только этого компонента и сам остальной проблемный код в комментариях к этому вопросу. Как правильно применить пропы во всех компонентах React Native с использованием того же TypeScript?
Заранее вам спасибо!

Comments

[Сергей Золотарёв]

Проблемные примеры TypeScript-кода с пропами:

1. 
   Первый компонент:
   

   import React, {Component} from 'react';
   import { FlatList, Text, View } from 'react-native';
   import { BottomTabNavigator, NavigationScreenProp } from 'react-navigation';
   import { StoresFeed } from '../../handlers/stores/homepage/Feed';
   import { CategoryPage } from '../../handlers/stores/pages/Category';
   import { StoreListService }  from '../../services/stores/homepage/List';
   
   export interface CCScreenProps {
         navigation: NavigationScreenProp<any,any>
   }
   export class CCScreen extends Component<CCScreenProps, object>{
   
   	render(){
   		const productsList = new StoreListService('currentCategory',null).eventStart();
   		return (
   			<React.Fragment>
   				<View style={screenStyle.list}>
   					<Text style={pageStyle.listTitle}>{this.props.catName}</Text>
   					<FlatList data={productsList} renderItem={({item}: {item: any}) => {
   						if(this,props.cat === item.CatID){ return <Text style={pageStyle.LCList} onClick={() => this.props.navigation.jumpTo('CurrentProduct', {product: item.ID})}>{item.Product}</Text> }
   					}} />
   				</View>
   			</React.Fragment>
   		);
   	}
   }
   
   const pageStyle = new CategoryPage('ui-change',0).eventStart(),
         screenStyle = new CategoryPage('ui-change',1).eventStart();

   
   
   
2. 
   Второй компонент:
   

   import React, {Component} from 'react';
   import { Image, Text, View } from 'react-native';
   import { BottomTabNavigator, NavigationScreenProp } from 'react-navigation';
   import { StoresFeed } from '../../handlers/stores/homepage/Feed';
   import { ProductPage } from '../../handlers/stores/pages/Product';
   import { StoreFeedService }  from '../../services/stores/homepage/Feed';
   
   export interface CPScreenProps {
         navigation: NavigationScreenProp<any,any>
   }
   export class CPScreen extends Component<CPScreenProps, object>{
   
   	render(){
   		let curQuery = {
   			productId : this.props.product
   		}
   
   		const productInfo = new StoreFeedService('currentProduct',curQuery).eventStart();
   		return (
   			<React.Fragment>
   				<View style={screenStyle.list}>
   					<Image style={screenStyle.image} source={{uri: productInfo.Image}}/>
   					<Text style={pageStyle.title}>{productInfo.Name}</Text>
   					<Text style={pageStyle.description}>{productInfo.Description}</Text>
   				</View>
   			</React.Fragment>
   		);
   	}
   }
   
   const pageStyle = new ProductPage('ui-change',0).eventStart(),
         screenStyle = new ProductPage('ui-change',1).eventStart();

   
   
   

[Сергей Золотарёв]

И сам App.tsx:

import * as React from 'react';
import { View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Stores } from './pages/stores';
import { CCScreen } from './pages/stores/catView';
import { CPScreen } from './pages/stores/productView';

function StoresScreen({navigation}: {navigation: any}) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#ffffff'}}>
      <Stores />
    </View>
  );
}

let icons = {
  "stores": ({ focused, size }: { focused: boolean, size: number }) => (
    <FontAwesome5 name="store" size={size} color={focused ? '#ff0033' : '#8a8886'} />
  )
};


let headerSheet = {
  "ui":{
    "stores":{
      backgroundColor: '#ffffff'
    }
  },
  "text":{
    "stores":'#ff0033'
  }
};

let headerButtons = {
  "stores":() => (
    <FontAwesome5
      name="search"
      onPress={() => alert('Кнопка поиска')}
      style={{
        fontSize: '160%',
        width: '40%'
      }}
      color="#ff0033"
    />
  )
};


const Tab = createBottomTabNavigator();

export default function App() {

    return (
      <NavigationContainer>
        <Tab.Navigator initialRouteName="Home">
          <Tab.Screen name="CurrentCategory" component={CCScreen} options={{ tabBarVisible: false, headerTintColor: headerSheet['text']['category'], headerStyle: headerSheet['ui']['category'], headerTitleStyle: {fontWeight: 'normal',fontSize: '130%'}}} />
          <Tab.Screen name="CurrentProduct" component={CPScreen} options={{ tabBarVisible: false, headerTintColor: headerSheet['text']['category'], headerStyle: headerSheet['ui']['product'], headerTitleStyle: {fontWeight: 'normal',fontSize: '130%'}, headerRight: headerButtons['product'] }} />
        </Tab.Navigator>
      </NavigationContainer>
    );

}

[Сергей Золотарёв]

В заключение:

• Bottom Tab Navigator in React Navigation
  
• Stackoverflow answer
  

[Aetae]

<Stores /> -> <Stores navigation={navigation}/>?