1. 程式人生 > >React Navigation引數傳遞動態修改navigationOptions->title

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