React Native调用navigation跳转报Cannot read property 'navigate' of undefined错误

• 只有直接作为Stack.Screen的component属性传入的组件，React Navigation才会自动注入navigation、route两个props。如果你的Home组件是在其他页面（比如Appis页面）内手动通过<Home />的方式渲染的，就不会自动拿到navigation属性，调用props.navigation.navigate自然就会触发undefined报错。
• 少数情况是props传递链路中断，比如父组件没把navigation props透传给Home子组件。

方法1（函数组件优先推荐）：使用useNavigation钩子 #

不需要依赖props注入，直接在函数组件内调用React Navigation提供的useNavigation钩子获取导航实例，修改Home组件代码如下：

// 顶部先导入钩子
import { useNavigation } from '@react-navigation/native';

const Home = (props) => {
  // 直接获取导航实例
  const navigation = useNavigation();
  if (props.authState === 'signedIn')
    return (
      <View>
        <TouchableOpacity
          style={styles.submitButton4}
          title="Create Profile"
          color="orange"
          fontSize="18"
          padding="20"
          height="hp('7%')"
          width="wp('17.5%')"
          onPress={() => {
            // 不用props，直接调用navigation
            navigation.navigate('Profilee');
          }}></TouchableOpacity>
      </View>
    );
  else return <></>;
};

方法2：父组件透传props #

如果Home是其他页面的子组件，只需要在父组件渲染Home的时候把自身拿到的navigation props传进去即可：

// 父组件内的渲染代码示例
<Home 
  navigation={props.navigation}
  authState={你的authState变量}
/>

方法3：高阶组件包裹（兼容类组件场景） #

如果需要兼容类组件写法，可以用withNavigation高阶组件包裹Home组件，自动注入navigation props：

import { withNavigation } from '@react-navigation/compat';

const Home = (props) => {
  // 原有逻辑不变，直接用props.navigation
}

export default withNavigation(Home);

你当前的导航配置里Profilee的页面名和跳转时的目标名完全匹配，不会出现命名不匹配的问题，只需要按上面的方法解决navigation属性获取的问题即可修复报错。

内容的提问来源于stack exchange，提问作者Ankit Verma