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

最新推荐文章于 2025-04-29 21:22:42 发布

F-ZERO-F

最新推荐文章于 2025-04-29 21:22:42 发布

阅读量2.2k

点赞数 2

本文链接：https://blog.youkuaiyun.com/sun_DongLiang/article/details/86062683

版权

本文介绍了在React Native项目中如何使用React-Navigation库处理导航栏上的页面跳转问题。作者在尝试点击导航栏右上角图片跳转时遇到报错，原因是`navigationOptions`是一个静态常量，无法获取组件实例的`props`。通过修改代码，将`navigation`对象通过函数返回并传入，成功解决了页面跳转的问题。最后讨论了为何在某些情况下需要手动传递`navigation`对象的原因。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

点击图片之后报错信息为：
在这里插入图片描述