React Native中Stack Navigator的this.props.navigation.navigate失效问题

核心问题1：函数组件错误使用this.props #

你的Entry是函数组件，函数组件内不存在this对象，直接通过传入的props参数访问导航对象即可，无需添加this前缀。

核心问题2：初始路由设置可能不符合预期 #

当前StackNavigator的initialRouteName="Home"，意味着APP启动后默认进入Home页面，若你希望先展示Entry页面，需要将initialRouteName修改为"Entry"。

修复后的代码 #

1. 修正Entry页面的导航逻辑

export default function Entry(props){
 return( 
  <TouchableOpacity
    onPress={() => props.navigation.navigate('Home')} // 移除多余的this
    style={styles.logBtn}>
    <Text style={{ fontFamily: 'Jost', color: '#1b4034' }}>
      Login
    </Text>
  </TouchableOpacity> 
 );
}

2. （可选）调整StackNavigator的初始路由

若需要默认进入Entry页面，修改StackNavigator配置：

<Stack.Navigator
  initialRouteName="Entry" // 将初始路由改为Entry
  screenOptions={{
    headerShown: false,
  }}>
  <Stack.Screen name="Entry" component={Entry} />
  <Stack.Screen name="Home" component={Home} />
</Stack.Navigator>

内容的提问来源于stack exchange，提问作者Velvet Facade