新建項目：react-native init demo
安裝react-navgation3.x

yarn add react-navigation
# or with npm
# npm install --save react-navigation

react-native-gesture-handler組件庫為react-navgation使用的第三方庫，只要作用于手勢左右滑動。

yarn add react-native-gesture-handler
# or with npm
# npm install --save react-native-gesture-handler
react-native link react-native-gesture-handler

在React Navigation中有以下導(dǎo)航器：
createStackNavigator: 類似于普通的Navigator，屏幕上方導(dǎo)航欄；；
createBottomTabNavigator：屏幕底部Tab；
createMaterialTopTabNavigator：屏幕頂部Tab；
createDrawerNavigator: 抽屜效果；
createSwitchNavigator：一次只顯示一個頁面，無法執(zhí)行回退操作。
新建AppNavigator.js文件，將index.js文件中的入口文件替換掉。

const InitNavigator=createStackNavigator({
    WelcomePage:{
        screen:WelcomePage,
        navigationOptions:{
            header:null,//可以通過header：null來禁用StackNavigator默認(rèn)的Navigation
        }
    }
});


const MainNavigator=createStackNavigator({
    HomePage:{
        screen:HomePage,
        navigationOptions:{
            header:null
        }
    },
    DetailPage:{
        screen:DetailPage,
        navigationOptions:{
            header:null
        }
    }
});

export default createAppContainer(createSwitchNavigator({
    Init:InitNavigator,
    Main:MainNavigator
},{
    navigationOptions:{
        header:null
    }
}))

此處為兩個導(dǎo)航器：InitNavigator和MainNavigator，用createSwitchNavigator控制其一次只顯示一個導(dǎo)航器。
為方便跳轉(zhuǎn)回退等操作，可以封裝NavigationUtil.js文件。

export default class NavigationUtil{
    /**
     * 跳轉(zhuǎn)到指定頁面
     * @param params 要傳遞的參數(shù)
     * @param page 要跳轉(zhuǎn)的頁面名
     **/
    static goPage(params, page) {
        const navigation = NavigationUtil.navigation;
        if (!navigation) {
            console.log('NavigationUtil.navigation can not be null')
            return;
        }
        navigation.navigate(
            page,
            {
                ...params
            }
        )
    }
    /**
     * 返回上一頁
     * @param navigation
     */
    static goBack(navigation) {
        navigation.goBack();
    }
    /**
     * 重置到首頁
     * @param navigation
     */
    static resetToHomePage(params) {
        const {navigation} = params;
        navigation.navigate("Main");
    }
}

因為涉及跨導(dǎo)航之間的跳轉(zhuǎn)操作，故用NavigationUtil.navigation來起到緩存navigation對象的作用，方便跳轉(zhuǎn)等操作。
在HomePage中使用BottomTabNavigator

type Props = {};
export default class HomePage extends Component<Props> {
    _tabNavigator() {
        return createAppContainer(createBottomTabNavigator({
            PopularPage: {
                screen: PopularPage,
                navigationOptions: {
                    tabBarLabel: '最熱',
                    tabBarIcon:({tintColor, focused}) => (
                        <MaterialIcons
                            name={'whatshot'}
                            size={26}
                            style={{color: tintColor}}
                        />
                    ),
                }
            },
            TrendingPage: {
                screen: TrendingPage,
                navigationOptions: {
                    tabBarLabel: '趨勢',
                    tabBarIcon: ({tintColor, focused}) => (
                        <Ionicons
                            name={'md-trending-up'}
                            size={26}
                            style={{color: tintColor}}
                        />
                    ),
                }
            },
            FavoritePage: {
                screen: FavoritePage,
                navigationOptions: {
                    tabBarLabel: '收藏',
                    tabBarIcon: ({tintColor, focused}) => (
                        <MaterialIcons
                            name={'favorite'}
                            size={26}
                            style={{color: tintColor}}
                        />
                    ),
                }
            },
            MyPage: {
                screen: MyPage,
                navigationOptions: {
                    tabBarLabel: '我的',
                    tabBarIcon: ({tintColor, focused}) => (
                        <Entypo
                            name={'user'}
                            size={26}
                            style={{color: tintColor}}
                        />
                    ),
                }
            }
        }))
    }

    render() {
        NavigationUtil.navigation=this.props.navigation
        const Tab = this._tabNavigator();
        return (
            <Tab/>
        );
    }
}

此處可配合react-native-vector-icons第三方圖標(biāo)庫使用。
在PopularPage.js文件中使用MaterialTopTabNavigator

type Props = {};
export default class PopularPage extends Component<Props> {
    render() {
        const TabNavigator = createAppContainer(createMaterialTopTabNavigator({
            PopularTab1: {
                screen: ()=><PopularTab tabLabel={'TAB1'}/>,
                navigationOptions: {
                    title: 'tab1'
                }
            },
            PopularTab2: {
                screen: PopularTab,
                navigationOptions: {
                    title: 'tab2'
                }
            }
        }));
        return (<View style={{flex:1,marginTop:30}}><TabNavigator/></View>);
    }
}

class PopularTab extends Component<Props> {
    render() {
        const {tabLabel} = this.props;
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>{tabLabel}</Text>
                <Text onPress={()=>{
                    NavigationUtil.goPage({},'DetailPage')
                }}>跳轉(zhuǎn)到詳情頁</Text>
            </View>
        );
    }
}

此頁面在HomePage的導(dǎo)航器中，所以直接用props的中navigation對象進(jìn)行跳轉(zhuǎn)的時候需要在HomePage中緩存navigation對象才可以進(jìn)行操作。