一、問題背景

react-navigation是react-native官方推薦的，基於Javascript的可擴充套件且使用簡單的導航，功能強大且完備

回顧一下，react-navigation包含以下功能來幫助我們建立導航器:

• StackNavigator - 一次只渲染一個頁面，並提供頁面之間跳轉的方法。 當開啟一個新的頁面時，它被放置在堆疊的頂部
• TabNavigator - 渲染一個Tab選項卡，讓使用者可以在幾個Tab頁面之間切換
• DrawerNavigator - 提供一個從螢幕左側滑入的抽屜，類似bilibili和QQ的隱藏在左側的內容欄功能

（1）通過navigate函式實現介面之間跳轉：

this.props.navigation.navigate('Mine');

引數為我們在StackNavigator註冊介面元件時的名稱。

同樣也可以從當前頁面返回到上一頁：

// 返回上一頁
this.props.navigation.goBack();

這是手動返回上一頁，也可通過每個頁面自帶的返回圖示返回

（2）跳轉時傳值：

this.props.navigation.navigate('Mine',{info: 'value'});

第一個引數同樣為要跳轉的介面元件名稱，第二個引數為要傳遞的引數，info可以理解為key，後面即傳遞的引數（value值）。

同樣，我們也可以在跳轉後的頁面去獲取攜帶過來的值：

this.props.navigation.state.params.info}

通過state.params來獲取傳來的引數，後面為key值。此處為info。

//會覆蓋StackNavigator宣告的頁面的navigationOptions 
static  navigationOptions = ({navigation}) => ({
    headerTintColor: '#fff',
    headerStyle: {height: 65, backgroundColor: '#fb7299'},
    headerTitle: navigation.state.params.title, //這是從上一級跳轉攜帶的
    headerTitleStyle: {
        fontSize: 18,
        color: '#fff',
        alignSelf: 'center',    //包括下面的屬性主要是為了標題居中顯示
        flex: 1,
        textAlign: 'center'
    },
    headerRight: <View>
    　　　　　　　　　　<TouchableOpacity onPress={() => {navigation.state.params.toOperate();}}>    //此處必須通過新增引數的形式來呼叫方法
        　　　　　　　　　　<View><Text style={{color: '#fff', marginRight: 20}}>下一步</Text></View>
    　　　　　　　　　　</TouchableOpacity >
　　　　　　　　　　</View>
})

1. navigation.state.params.title表示通過引數的形式來顯示標題
2. 想要標題居中，alignSelf: 'center', flex: 1, textAlign: 'center'
3. navigation.state.params.toOperate();通過這種傳參的方式，在標題欄中呼叫方法

該方法需要在componentDidMount()等方法中設定傳遞

componentDidMount() {
    this.props.navigation.setParams({toOperate: () => {
        alert('操作')
    }})
}

三、結語
先這樣咯！