版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sun_DongLiang/article/details/86062683
前几天刚刚接触React Navigation
对React Native
的页面跳转进行管理,在页面的主体部分进行跳转时,直接使用navigation
的navigate
即可。但是在导航条中没有办法进行页面的跳转。
点击右上角的图片,跳转到相应的发布动态页面。
static navigationOptions = {
headerRight: (
<TouchableOpacity onPress={() => props.navigation.navigate('ReleaseDynamics')}>
<Image source={require('releaseDynamic.png')} />
</TouchableOpacity>
)
}
点击图片之后报错信息为:
依据报错信息,以及编辑工具给的提示可以得知,在navigationOptions
中props
是获取不到的。因此无法实现页面跳转。
原因分析:
navigationOptions是一个由static修饰的静态常量,他不是组件的实例。而props是用于组件之间信息的传递。很显然他是无法获取到props中的信息。
看一个代码例子:
点击了ArrowListItem
之后他就会执行这个handleClickMyDynamic
函数。在这个函数中,他是可以使用props
中的navigation
的,因此当把navigationOptions
对象通过函数的方式将其返回出来时,React Native
就会在调用函数的同时默认的传入props
对象。此时就可以拿到props
中的navigation
。来看一下修改之后的代码。
static navigationOptions =(props) => {
return {
headerRight: (
<TouchableOpacity onPress={() => props.navigation.navigate('ReleaseDynamics')}>
<Image source={require('releaseDynamic.png')} />
</TouchableOpacity>
)
}
}
此时就可以成功进行跳转。
有一个问题:为什么在前面的例子中不需要传入props
,而在当前的代码必须要手动传输进去呢?
被static
修饰的区域,在组件刚刚初始化时就会执行,此时如果不将props
传输进去,他是获取不到navigation
的。因此需要将props
以参数的形式传输进去。这个解释是我的猜想,如有错误,非常欢迎指正
完成。