React Native使用React-Navigation在导航栏完成页面跳转

版权声明：本文为博主原创文章，未经博主允许不得转载。 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以参数的形式传输进去。这个解释是我的猜想，如有错误，非常欢迎指正
完成。