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

痛定思痛。 2022-03-29 09:23 217阅读 0赞

前几天刚刚接触`React Navigation`对`React Native`的页面跳转进行管理，在页面的主体部分进行跳转时，直接使用`navigation`的`navigate`即可。但是在导航条中没有办法进行页面的跳转。  
![在这里插入图片描述][2019010817562790.png]  
点击右上角的图片，跳转到相应的发布动态页面。

static navigationOptions = {
        headerRight: (
          <TouchableOpacity onPress={() => props.navigation.navigate('ReleaseDynamics')}>
                <Image source={require('releaseDynamic.png')} />
          </TouchableOpacity>
        )
      }

点击图片之后报错信息为：  
![在这里插入图片描述][20190108180713674.png]

依据报错信息，以及编辑工具给的提示可以得知，在`navigationOptions`中`props`是获取不到的。因此无法实现页面跳转。  
**原因分析：**  
navigationOptions是一个由static修饰的静态常量，他不是组件的实例。而props是用于组件之间信息的传递。很显然他是无法获取到props中的信息。  
**看一个代码例子：**  
![在这里插入图片描述][20190108181319193.png]  
![在这里插入图片描述][20190108181331790.png]  
点击了`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`以参数的形式传输进去。**这个解释是我的猜想，如有错误，非常欢迎指正**  
完成。

[2019010817562790.png]: /images/20220329/0e3bc59fd65f434594afe1903122f0ef.png
[20190108180713674.png]: /images/20220329/1d72c841ad604793b421ebb9ab33a5a9.png
[20190108181319193.png]: /images/20220329/034509e4b9ba44a39ea62cebf2dc9e45.png
[20190108181331790.png]: /images/20220329/af29ab75ea1644b9bd9f0e3b9818ab7c.png