1，首先，下載，安裝，引入react-navigation

　npm install --save react-navigation

　或者

yarn add react-navigation

StackNavigator類似頂部導航條，用來跳轉頁面和傳遞參數。
TabNavigator類似底部標簽欄，用來區分模塊。
DrawerNavigator抽屜，類似從App左側滑出一個頁面。

2，在根目錄創建一個文件夾 router ,裏邊分別創建三個js文件
index.js , navConfig.js , routeConfig.js

index.js 代碼如下：import React, { Component } from ‘react‘;

import { Text, View, AppRegistry } from ‘react-native‘;
import {StackNavigator, TabBarBottom, TabNavigator} from "react-navigation";

import RouteConfigs from ‘./routeConfig‘
import StackNavigatorConfig from ‘./navConfig‘


const Navigator = StackNavigator(RouteConfigs, StackNavigatorConfig);

export 
 
default class MainComponent extends Component {
    render() {
        return (
            <Navigator/>
        )
    };
}

AppRegistry.registerComponent(‘reactNative‘, () => MainComponent );

navConfig.js 代碼如下：

import React, { Component } from ‘react‘;
import { Text, View } from ‘react-native‘;
import {StackNavigator, TabBarBottom, TabNavigator} from 
 
"react-navigation";
import CardStackStyleInterpolator from ‘react-navigation/src/views/CardStack/CardStackStyleInterpolator‘;

const StackNavigatorConfig = {
    initialRouteName: ‘Tabbar‘,  //指向tabbar，固配置tabbar
    initialRouteParams: {initPara: ‘初始頁面參數‘},
    navigationOptions: {
        // title: ‘‘,
        // headerTitleStyle: {fontSize: 18, color: ‘#666666‘},
        // headerStyle: {height: 48, backgroundColor: ‘#FFF‘},
    },
    // paths: ‘page/main‘,
    mode: ‘card‘,
    headerMode: ‘screen‘,
    cardStyle: {backgroundColor: "#ffffff"},
    transitionConfig: (() => ({
        screenInterpolator: CardStackStyleInterpolator.forHorizontal,
    })),
    onTransitionStart: (() => {
        console.log(‘頁面跳轉動畫開始‘);
    }),
    onTransitionEnd: (() => {
        console.log(‘頁面跳轉動畫結束‘);
    }),
};

export default StackNavigatorConfig;

// initialRouteName - 導航器組件中初始顯示頁面的路由名稱，如果不設置，則默認第一個路由頁面為初始顯示頁面
// initialRouteParams - 給初始路由的參數，在初始顯示的頁面中可以通過 this.props.navigation.state.params 來獲取
// navigationOptions - 路由頁面的配置選項，它會被 RouteConfigs 參數中的 navigationOptions 的對應屬性覆蓋。
// paths - 路由中設置的路徑的覆蓋映射配置
// mode - 頁面跳轉方式，有 card 和 modal 兩種，默認為 card ：
// card - 原生系統默認的的跳轉
// modal - 只針對iOS平臺，模態跳轉
// headerMode - 頁面跳轉時，頭部的動畫模式，有 float 、 screen 、 none 三種：
// float - 漸變，類似iOS的原生效果
// screen - 標題與屏幕一起淡入淡出
// none - 沒有動畫
// cardStyle - 為各個頁面設置統一的樣式，比如背景色，字體大小等
// transitionConfig - 配置頁面跳轉的動畫，覆蓋默認的動畫效果
// onTransitionStart - 頁面跳轉動畫即將開始時調用
// onTransitionEnd - 頁面跳轉動畫一旦完成會馬上調用

routeConfig.js 代碼如下：

import React, { Component } from ‘react‘;
import { Text, View, StyleSheet, Image } from ‘react-native‘;
import {StackNavigator, TabBarBottom, TabNavigator} from "react-navigation";

// 導入所有組件（包括tabbar映射的組件）
import Home from ‘../demoPage/home‘;
import News from ‘../demoPage/news‘;
import My from ‘../demoPage/my‘;
import Page4 from ‘../demoPage/page4‘;  //其它組件（非 tabbar）

// tabbar路由配置
const Tabbar = TabNavigator({
    /**
        screen：和導航的功能是一樣的，對應界面名稱，可以在其他頁面通過這個screen傳值和跳轉。  
        navigationOptions：配置TabNavigator的一些屬性  
        title：標題，會同時設置導航條和標簽欄的title  
        tabBarVisible：是否隱藏標簽欄。默認不隱藏(true)  
        tabBarIcon：設置標簽欄的圖標。需要給每個都設置  
        tabBarLabel：設置標簽欄的title。推薦  
     */
    Home: { 
        screen: Home ,
        navigationOptions: ({navigation}) => ({
            /**
             * tabBarLabel tabbar名稱
             */
            tabBarLabel:‘首頁‘, 
            tabBarIcon: ({focused,tintColor}) => (
                /**
                 * focused屬性 選中渲染的圖片
                 */
                focused ? <Image style={styles.icon} source={require(‘../image/index.png‘)} /> : <Image style={styles.icon} source={require(‘../image/tab_btn_home.png‘)} />
            )  
        })
    },
    News: { 
        screen: News,
        navigationOptions: ({navigation}) => ({
            tabBarLabel:‘消息‘, 
            tabBarIcon: ({focused,tintColor}) => (
                focused ? <Image style={styles.icon} source={require(‘../image/tab_btn_classification_hl.png‘)} /> : <Image style={styles.icon} source={require(‘../image/tab_btn_classification.png‘)} />
            )  
        })
    },
    My: { 
        screen: My,
        navigationOptions: ({navigation}) => ({
            tabBarLabel:‘我的‘, 
            tabBarIcon: ({focused,tintColor}) => (
                focused ? <Image style={styles.icon} source={require(‘../image/tab_btn_user_hl.png‘)} /> : <Image style={styles.icon} source={require(‘../image/tab_btn_user.png‘)} />
            )  
        })
    },
},{
    tabBarComponent:TabBarBottom,
    tabBarPosition: ‘bottom‘,
    initialRouteName: ‘Home‘,
    showIcon:‘true‘
    /**
        導航欄配置  
        tabBarPosition：設置tabbar的位置，iOS默認在底部，安卓默認在頂部。（屬性值：‘top‘，‘bottom‘）  
        swipeEnabled：是否允許在標簽之間進行滑動  
        animationEnabled：是否在更改標簽時顯示動畫  
        lazy：是否根據需要懶惰呈現標簽，而不是提前，意思是在app打開的時候將底部標簽欄全部加載，默認false,推薦為true  
        trueinitialRouteName： 設置默認的頁面組件  
        backBehavior：按 back 鍵是否跳轉到第一個Tab(首頁)， none 為不跳轉  
        tabBarOptions：配置標簽欄的一些屬性iOS屬性  
        activeTintColor：label和icon的前景色 活躍狀態下  
        activeBackgroundColor：label和icon的背景色 活躍狀態下  
        inactiveTintColor：label和icon的前景色 不活躍狀態下  
        inactiveBackgroundColor：label和icon的背景色 不活躍狀態下  
        showLabel：是否顯示label，默認開啟 style：tabbar的樣式  
        labelStyle：label的樣式安卓屬性  
        activeTintColor：label和icon的前景色 活躍狀態下  
        inactiveTintColor：label和icon的前景色 不活躍狀態下  
        showIcon：是否顯示圖標，默認關閉  
        showLabel：是否顯示label，默認開啟 style：tabbar的樣式  
        labelStyle：label的樣式 upperCaseLabel：是否使標簽大寫，默認為true  
        pressColor：material漣漪效果的顏色（安卓版本需要大於5.0）  
        pressOpacity：按壓標簽的透明度變化（安卓版本需要小於5.0）  
        scrollEnabled：是否啟用可滾動選項卡 tabStyle：tab的樣式  
        indicatorStyle：標簽指示器的樣式對象（選項卡底部的行）。安卓底部會多出一條線，可以將height設置為0來暫時解決這個問題  
        labelStyle：label的樣式  
        iconStyle：圖標樣式  
     */

}) 


// 整個app路由配置
const RouteConfigs = {
    // 導入tabbar路由配置
    Tabbar: {
        screen: Tabbar,
    },
    // 下邊是其它組件路由配置 （非tabbar）
    Page4: {
        screen: Page4,
        navigationOptions: ({navigation}) => ({
            title: ‘Page4頁面‘,
        }),
    },
};

// 樣式
const styles = StyleSheet.create ({
    icon: {
        width:20,
        height:20
    }
})

export default RouteConfigs;

// *********************************   navigationOptions屬性   ****************************************************************
// title: ‘首頁‘,
// header - 自定義的頭部組件，使用該屬性後系統的頭部組件會消失
// headerTitle - 頭部的標題，即頁面的標題
// headerBackTitle - 返回標題，默認為 title
// headerTruncatedBackTitle - 返回標題不能顯示時（比如返回標題太長了）顯示此標題，默認為 “Back”
// headerRight - 頭部右邊組件
// headerLeft - 頭部左邊組件
// headerStyle - 頭部組件的樣式
// headerTitleStyle - 頭部標題的樣式
// headerBackTitleStyle - 頭部返回標題的樣式
// headerTintColor - 頭部顏色
// headerPressColorAndroid - Android 5.0 以上MD風格的波紋顏色
// gesturesEnabled - 否能側滑返回， iOS 默認 true ， Android 默認 false

react-navigation 導航、路由