前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >React Navigation参数传递动态修改navigationOptions->title

React Navigation参数传递动态修改navigationOptions->title

作者头像
十里桃花舞丶
发布2018-05-17 14:56:30
2.6K0
发布2018-05-17 14:56:30
举报

前言

博主最近在写react native,发现Navigator只剩下NavigatorIOS可以使用,要想在安卓上使用Navigator,可以使用官方推荐的React-Nativation。因为对ES的语法不熟,加上需要看文档慢慢鼓捣,所以总有些坑得慢慢躺。下面讲的这个问题是动态修改Navigator的title。

问题描述

navigation跳转的时候,传递参数后,需要跳转后的页面接收,并且修改navigationOptions中的title,使得动态修改跳转页面的标题

解决办法

1. 传参

onPress={() => {
            this.props.navigation.navigate('需要跳转的Screen', {
                  title: '需要传递的参数'
            });
          }}

具体传参的实例代码可以去参照官方文档:https://reactnavigation.org/docs/params.html

注意: 如果当前js定义和使用了Navigator,则这个组件会自动绑定在this.props.navigation中,所以你可以在全局使用它提供的方法,或者将this.props.navigation在使用其他页面的组件模块时传递到相应的js中。

2. 接收参数

class list extends Component{
static navigationOptions =  ({ navigation }) =>({
        title: navigation.state.params.title,
    });
render() {...} 
}

注意这个语法,因为对ES的语法不熟,所以开始时候搞不明白可以使用什么来给navigationOptions传参,后来发现可以这样,({navigation})是调用当前方法时自动注入的参数, 然后添加下面那行就可以实现动态修改title的功能了。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018年04月12日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 问题描述
  • 解决办法
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档