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

前言

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

问题描述

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

解决办法

1. 传参

代码语言：javascript复制

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

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

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

2. 接收参数

代码语言：javascript复制

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

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

reactnative

0 人点赞