React Native中使用StackNavigator时Props未定义的问题求助

你遇到的问题很典型——只有被StackNavigator直接管理的屏幕组件才会自动获得navigation props，而你的LoginForm是Login组件的子组件，并没有自动拿到这个props，所以调用this.props.navigation.navigate时才会报错。

快速解决方案：手动传递navigation props #

在Login.js里渲染LoginForm的时候，把Login组件的navigation props传递给它：

// Login.js的render方法里
<View style = {styles.formContainer}>
  <LoginForm navigation={this.props.navigation} /> {/* 这里加上navigation props */}
</View>

这样LoginForm就能通过this.props.navigation访问到导航方法了，点击按钮就能正常跳转到MainScreen。

另一种更便捷的方法：使用withNavigation高阶组件 #

如果你不想每次都手动传递navigation props，可以用react-navigation提供的withNavigation高阶组件，它会自动把navigation注入到子组件的props中：

1. 先在LoginForm.js顶部导入withNavigation：

import { withNavigation } from 'react-navigation';

2. 修改组件的导出语句：

// 把原来的export default改成下面这样
export default withNavigation(LoginForm);

这样即使不手动传递props，LoginForm也能直接使用this.props.navigation了。

为什么会出现这个问题？ #

StackNavigator的工作机制是：它只会给直接注册到导航器中的屏幕组件（也就是你在AppNavigation里定义的LoginScreen对应的Login组件）自动注入navigation、navigationOptions等相关props。而嵌套在这些屏幕组件内部的子组件，不会自动获得这些props，必须手动传递或者用高阶组件来注入。

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