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

前言

博主最近在写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的功能了


  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

桥路丶

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值