Получение ошибки «undefined не является объектом, оценивающим this.props.navigation» при попытке перейти на другой экран.

Question

возвращает эту ошибку при привязке к навигации с помощью switchnavigation.

Я пытался удалить это. Затем реквизит возвращает неопределенное «навигация».

import React from 'react';
import { Text, View, Image, TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import { createSwitchNavigator, createAppContainer , withNavigation } from 'react-navigation';
import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen';
import layout from '../../constants/LayoutStyle'
import QuoteScreen from './QuoteScreen';

 const HomeScreen = () => {

 return (
           <View style={styles.viewStyles}>
           <View style={{position: 'absolute',top: hp('50%')+wp('37.5%'),left:wp('15%'),width: wp('32.5%'),height: 
      wp('32.5%'),backgroundColor:'rgba(255,255,255,0.1)'}}>
            <View style={{alignItems: 'center',justifyContent: 'center',flex:1}}>
            <Icon name="ios-book" color="purple" size={wp('10%')}
              onPress={() => this.props.navigation.navigate('Quote')}
              />
            <Text style={styles.tabTextStyle}>Books</Text>
            </View>
  </View>

    );
 };

 const RootStack = createSwitchNavigator(
  {
     Home: HomeScreen,
     Quote: QuoteScreen,
   }
 );

  const AppContainer = createAppContainer(RootStack);

  export default class app extends React.Component {
    render() {
      return <AppContainer />
    }
  }

ожидается, что навигация завершится правильно

Answer 1

HomeScreen является функциональным компонентом, и поэтому вам не следует использовать this.props.navigation, просто скажите props.navigation.

И если вы хотите использовать реквизиты внутри функционального компонента, тогда use должен передать реквизиты в качестве аргумента этому функциональному компоненту. Как это =>

 const HomeScreen = (props) => {
    return (
       <View style={styles.viewStyles}>
       <View style={{position: 'absolute',top: 
          hp('50%')+wp('37.5%'),left:wp('15%'),width: wp('32.5%'),height: 
  wp('32.5%'),backgroundColor:'rgba(255,255,255,0.1)'}}>
        <View style={{alignItems: 'center',justifyContent: 'center',flex:1}}>
        <Icon name="ios-book" color="purple" size={wp('10%')}
          onPress={() => this.props.navigation.navigate('Quote')}
          />
        <Text style={styles.tabTextStyle}>Books</Text>
        </View>
   </View>
   );
};

Если это не работает, тогда передайте навигацию как реквизиты компоненту HomeScreen , где бы вы ни находились, как здесь =>

<HomeScreen 
  navigation = {this.props.navigation} // or navigation = {props.navigation}, if it is functional component
/>