1 前言

react-navigation是RN開發中一款開源的導航元件，它的功能包括StackNavigator,TabNavigator,DrawerNavigator。react-navigation的出現替代了Navigator、 Ex-Navigation等老一代的導航元件，react-navigation可以說是Navigator的加強版，不僅有Navigator的全部功能，另外還支援底部導航類似於與iOS中的UITabBarController，此外它也支援側拉效果方式的導航類似於Android中的抽屜效果即DrawerNavigator

使用react-navigation之前，請先安全

yarn add react-navigation或者npm install --save react-navigation 

2 react-navigation屬性介紹

react-navigation中有兩個屬性非常重要，分別是navigation prop和navigationOptions props
1 navigation prop
當導航器中的螢幕被開啟時，它會收到一個navigation prop，navigation prop是整個導航環節的關鍵一員，接下來就詳細講解一下navigation的作用。
navigation包含一下功能：
navigate：

使用navigation時常用以下幾種功能：
（1）使用navigate進行介面之間的跳轉
navigate(routeName, params, action)
routeName：要跳轉到的介面的路由名，也就是在導航其中配置的路由名；
params：要傳遞給下一個介面的引數；
action：如果該介面是一個navigator的話，將執行這個sub-action
例子：

export default
 
 class HomePage extends Component{

    //覆蓋路由裡面設定
    static navigationOptions = {
        title:"Home",
        headerBackTitle:"主頁返回",
    };

    render(){
        //解構賦值 等價於const navigation = this.props.navigation;
        const {navigation} = this.props;

        return (
            <View style={styles.container}>
                <Text>HomePage</Text>
                <Button
                    title="Go to Page1"
                    onPress={() => {
                        //動態傳遞屬性到Page1
                        navigation.navigate('Page1',{name:"動態的"});
                    }}
                />
            </View>
        );
    }
}

這裡首先在render()中獲取navigation屬性，接在在Button中使用navigation.navigate()來跳轉到Page1介面，並帶了name:”動態的引數”。效果如下：

（2） 使用state的params
可以通過navigation.props.state.params來獲取通過setParams()，或navigation.navigate()傳遞的引數。
例如：

export default class Page1 extends Component{

    render(){
        const {navigation} = this.props;
        return (
            <View style={styles.container}>
                <Button
                    title="Go Back"
                    onPress={() => {
                        navigation.goBack();
                    }}
                />
                {/*使用屬性名*/}
                <Text>Page1 + {navigation.state.params.name}</Text>
            </View>
        );
    }
}

這裡獲取了HomePage傳遞過來的引數

（3） 使用setParams 改變route params
setParams: function setParams(params)： 我們可以藉助setParams來改變route params，比如，通過setParams來更新頁面頂部的標題，返回按鈕等；
例如改變標題的例子

export default class Page3 extends Component{

    render(){
        const {navigation} = this.props;
        const {state,setParams} = navigation;
        const {params} = state;
        let showText = params.mode === "edit" ? "正在編輯":"編輯完成";
        return (
            <View style={styles.container}>
                <Button
                    title="Go Back"
                    onPress={() => {
                        navigation.goBack();
                    }}
                />
                <Text>Page3 + {navigation.state.params.title}</Text>
                <Text>{showText}</Text>
                <TextInput
                    style={styles.input}
                    //監聽內容改變，並設定標題
                    onChangeText={text => {
                        setParams({
                            title:text,
                        });
                    }}/>
            </View>
        );
    }
}

這裡我們定義了一個輸入框，將輸入的內容實時的顯示在標題上

2 navigationOptions props(螢幕導航選項)

navigationOptions：配置StackNavigator的一些屬性。

title：標題，如果設定了這個導航欄和標籤欄的title就會變成一樣的，不推薦使用
header：可以設定一些導航的屬性，如果隱藏頂部導航欄只要將這個屬性設定為null
headerTitle：設定導航欄標題，推薦
headerBackTitle：設定跳轉頁面左側返回箭頭後面的文字，預設是上一個頁面的標題。可以自定義，也可以設定為null
headerTruncatedBackTitle：設定當上個頁面標題不符合返回箭頭後的文字時，預設改成"返回"
headerRight：設定導航條右側。可以是按鈕或者其他檢視控制元件
headerLeft：設定導航條左側。可以是按鈕或者其他檢視控制元件
headerStyle：設定導航條的樣式。背景色，寬高等
headerTitleStyle：設定導航欄文字樣式
headerBackTitleStyle：設定導航欄‘返回’文字樣式
headerTintColor：設定導航欄顏色
headerPressColorAndroid：安卓獨有的設定顏色紋理，需要安卓版本大於5.0
gesturesEnabled：是否支援滑動返回手勢，iOS預設支援，安卓預設關閉

StackNavigator 導航元件可以用來作為我們的頁面導航使用。導航元件主要使用react-navigation的StackNavigator函式來建立。
相關原始碼

const StackNavigator = (routeConfigs, config = {}) => {
  const navigator = createStackNavigator(routeConfigs, config);
  return createNavigationContainer(navigator);
};

export default StackNavigator;

RouteConfig配置如下：

screen：對應介面名稱，需要填入import之後的頁面

navigationOptions：同navigationOptions屬性

mode：定義跳轉風格

   card：使用iOS和安卓預設的風格

   modal：iOS獨有的使螢幕從底部畫出。類似iOS的present效果

headerMode：返回上級頁面時動畫效果

   float：iOS預設的效果

   screen：滑動過程中，整個頁面都會返回

   none：無動畫

cardStyle：自定義設定跳轉效果

   transitionConfig： 自定義設定滑動返回的配置

   onTransitionStart：當轉換動畫即將開始時被呼叫的功能

   onTransitionEnd：當轉換動畫完成，將被呼叫的功能

path：路由中設定的路徑的覆蓋對映配置

initialRouteName：設定預設的頁面元件，必須是上面已註冊的頁面元件

initialRouteParams：初始路由引數

3 StackNavigator建立導航路由

建立StackNavigator的示例如下：

import {StackNavigator} from "react-navigation";
import HomePage from "../test/pages/HomePage";
import Page1 from "../test/pages/Page1";
import Page2 from "../test/pages/Page2";
import Page3 from "../test/pages/Page3";
import React from "react";
import {Button,StyleSheet} from "react-native";


const AppNavigator = StackNavigator({
    HomePage:{
        screen:HomePage,
        navigationOptions:{
            title:"HomePage",
        }
    },
    Page1:{
        screen:Page1,
        //引數是props,{navigation} 表示解構賦值。箭頭函式返回值作為navigationOptions物件,需要小括號括起來
        navigationOptions: ({navigation}) => ({
            //這裡是TAB鍵上面那個
            title:`${navigation.state.params.name}頁面名`,
        })
    },
    Page2:{
        screen:Page2,
        navigationOptions:{
            title:"Page2",
        }
    },
    Page3:{
        screen:Page3,
        navigationOptions: (props) => {
            const {navigation} = props;
            const {state,setParams} = navigation;
            const {params} = state;
            return {
                title: params.title ? params.title:"This is Page3",
                //設定右標題
                headerRight:(
                    //使用Button作為按鈕
                    <Button style={styles.button} title={params.mode === "edit" ? "編輯" : "儲存"}
                            onPress={() => {
                                setParams({mode:params.mode === "edit" ? "":"edit"});
                            }}
                    />
                )
            }
        }
    }

},{
    //全域性配置引數
    navigationOptions:{
        // header:null,
    }
});


export default AppNavigator;

const styles = StyleSheet.create({
    button:{
        marginRight:10,
    }
});

可以看到建立StackNavigator導航器，主要建立routeconfig屬性和navigationOptions屬性

這裡建立了4個頁面的導航，其中第一個HomePage為作為預設的頁面載入。整體效果如下：

4 參考

有關react-natigation的其他詳細參考，請參考這篇部落格
http://www.devio.org/2018/05/15/navigator-to-react-navigation/

另外原始碼請參考如下：
https://github.com/qiyei2015/ReactNative/tree/master/project/GitHub src/test/page目錄