尝试导航到另一个屏幕时收到错误'undefined is not an object evaluating this.props.navigation'

Question

在使用开关导航绑定导航时返回此错误。

我试过删除它。 然后 props 返回未定义的"导航"。

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。

如果你想在函数组件中使用 props，那么 use 应该将 props 作为参数传递给该功能组件。像这样=>

 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
/>