出處

https://reactnavigation.org/docs/intro/
提供的主要功能：

• 頁面路由（頁面跳轉(zhuǎn)） this.props.navigation.navigate(目標(biāo)頁面,參數(shù))
• 三種頁面導(dǎo)航結(jié)構(gòu) StackNavigator（基于棧）、TabNavigator（tab切換）阶界、DrawerNavigator（抽屜風(fēng)格）

使用

• 頁面跳轉(zhuǎn)

使用react-navigation的每個頁面的props中會有一個navigation屬性嗜价，可通過它的navigate方法實現(xiàn)頁面跳轉(zhuǎn)

 this.props.navigation.navigate(
            'First',//路由配置中頁面唯一標(biāo)識
            {
                'from':'Page2'//傳遞的參數(shù)
            })

navigation屬性如下

navigation屬性.png

• 頁面導(dǎo)航的創(chuàng)建

有三種導(dǎo)航，創(chuàng)建方式如下

import {StackNavigator, TabNavigator, DrawerNavigator} from 'react-navigation'
//xxx對應(yīng)導(dǎo)航類型，分別取Stack悲立、Tab、Drawer
const XXXNav = XXXNavigator(XXXRouteConfig, XXXNavigatorConfig)

XXXNavigator：視圖導(dǎo)航構(gòu)造器
XXXRouteConfig：頁面路由配置薪铜，主要是聲明所包含的頁面
XXXNavigatorConfig：視圖相關(guān)配置吼渡，主要

• StackNavigator

效果

StackNavigator.gif

創(chuàng)建

• 界面標(biāo)題欄的配置信息 相同的配置可以提出來共用容为，更多配置屬性參考官網(wǎng)

const screenConfig = {
    headerStyle: {//標(biāo)題欄樣式
        backgroundColor: 'lightskyblue',
        justifyContent: 'center'
    },
    headerTitleStyle: {//標(biāo)題樣式
        color: 'white',
        alignSelf: 'center'
    },
    headerRight: <View></View>,//這里是為了讓標(biāo)題居中，將標(biāo)題欄右側(cè)填充一個空View
    headerTintColor:'white'//這個屬性可以設(shè)置左側(cè)返回箭頭顏色
}

• 導(dǎo)航路由配置 聲明所需的頁面

const StackRouteConfig = {
    First: {//First為該頁面唯一標(biāo)識
        screen: Page1,//頁面 即Component
        navigationOptions: screenConfig //前面定義的標(biāo)題欄配置
    },
    Second: {
        screen: Page2,
        navigationOptions: screenConfig
    }
}

• 導(dǎo)航配置 路由和視圖兩塊配置寺酪，更多配置屬性參考官網(wǎng)

const StackNavigatorConfig = {
    //路由相關(guān)
    initialRouteName: 'Second',//默認啟動頁面  對應(yīng)導(dǎo)航路由頁面配置中的頁面唯一標(biāo)識
    //視圖相關(guān)
    headerMode: 'screen'//為每個頁面添加一個標(biāo)題欄
}

• 創(chuàng)建一個棧風(fēng)格的導(dǎo)航視圖 前面的一切配置準(zhǔn)備好后坎背，使用構(gòu)造方法創(chuàng)建即可

const StackNav = StackNavigator(StackRouteConfig, StackNavigatorConfig)

在界面中配置標(biāo)題欄信息

除了可以在創(chuàng)建導(dǎo)航視圖時配置標(biāo)題欄，還可以在對應(yīng)頁面內(nèi)通過靜態(tài)方法navigationOptions設(shè)置

export default class Page1 extends BaseComponent {
    //該函數(shù)接收當(dāng)前頁面的導(dǎo)航
    static navigationOptions = ({navigation}) => {
        return {
            headerTitle: 'page_1',//這里返回了標(biāo)題欄的標(biāo)題
        }
    }
    ...
}

• TabNavigator

效果

TabNavigator.gif

創(chuàng)建

• 導(dǎo)航路由

//tab路由配置 包含哪些頁面
const TabRouteConfig = {
    First: {
        screen: Tab1,
    },
    Second: {
        screen: Tab2
    },
    Third: {
        screen: Tab3
    }
}

• 導(dǎo)航配置 主要是對tabbar的配置房维，更多配置屬性參考官網(wǎng)

const TabNavigatorConfig = {
    tabBarPosition: 'bottom',//tabbar的位置
    swipeEnabled: false,//是否允許滑動切換頁面
    animationEnabled: false,//是否允許切換動畫
    lazy: true,//懶加載
    //initialRouteName: 'Second',//初始定位的頁面 默認導(dǎo)航路由中的第一個頁面
    tabBarComponent: (params) => <CustomTabBarComp {...params}/>,//自定義tabbar
}

• 創(chuàng)建一個tab風(fēng)格的導(dǎo)航視圖 與StackNavigator別無二致

const TabNav = TabNavigator(TabRouteConfig, TabNavigatorConfig)

嵌套導(dǎo)航

一般應(yīng)用首頁是個tab風(fēng)格的界面沼瘫，然后從首頁跳轉(zhuǎn)到其他界面，這就是一種嵌套的導(dǎo)航風(fēng)格

嵌套navigator.gif

• 創(chuàng)建方法

const TabNav = TabNavigator(TabRouteConfig, TabNavigatorConfig)
//把創(chuàng)建的tab視圖作為screen添加到stack視圖即可
const StackRouteConfig = {
    Tab: {
        screen: TabNav
    },
    Fourth: {
        screen: Page1,
        navigationOptions: screenConfig
    },
    Fiveth: {
        screen: Page2,
        navigationOptions: screenConfig
    }
}
const StackNav = StackNavigator(StackRouteConfig, StackNavigatorConfig)

export default class RootPage extends BaseComponent {

    render() {
        return (
            <StackNav/>
        )
    }
}

• 嵌套視圖的跳轉(zhuǎn)

如果嵌套視圖中有重名路由B咙俩，那么當(dāng)前頁A跳轉(zhuǎn)到B時耿戚，會按就近原則選擇B頁面
比如

const TabRouteConfig = {
    First: {
        screen: Tab1,
    },
    Second: {
        screen: Tab2
    },
    Third: {
        screen: Tab3
    }
}
const StackRouteConfig = {
    Tab: {
        screen: TabNav
    },
    Third: {
        screen: Page1,
        navigationOptions: screenConfig
    },
    Fourth: {
        screen: Page2,
        navigationOptions: screenConfig
    }
}

可以看到tab視圖中的Tab2頁面和stack視圖中的Page1頁面路由重名，那么

• 在Tab2中進行頁面跳轉(zhuǎn) 結(jié)果是切換到Tab3而不是跳轉(zhuǎn)到Page1

this.props.navigation.navigate('Third',{});

• 在Page2中進行頁面跳轉(zhuǎn) 結(jié)果是跳轉(zhuǎn)到Page1而不是切換到Tab3

this.props.navigation.navigate('Third',{})阿趁；