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的功能了


你可能感兴趣的:(React,Native,问题解决)