初识react-navigation3.x

新建项目：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中有以下导航器：
createStackNavigator: 类似于普通的Navigator，屏幕上方导航栏；；
createBottomTabNavigator：屏幕底部Tab；
createMaterialTopTabNavigator：屏幕顶部Tab；
createDrawerNavigator: 抽屉效果；
createSwitchNavigator：一次只显示一个页面，无法执行回退操作。
新建AppNavigator.js文件，将index.js文件中的入口文件替换掉。

const InitNavigator=createStackNavigator({
    WelcomePage:{
        screen:WelcomePage,
        navigationOptions:{
            header:null,//可以通过header：null来禁用StackNavigator默认的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
    }
}))

此处为两个导航器：InitNavigator和MainNavigator，用createSwitchNavigator控制其一次只显示一个导航器。
为方便跳转回退等操作，可以封装NavigationUtil.js文件。

export default class NavigationUtil{
    /**
     * 跳转到指定页面
     * @param params 要传递的参数
     * @param page 要跳转的页面名
     **/
    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");
    }
}

因为涉及跨导航之间的跳转操作，故用NavigationUtil.navigation来起到缓存navigation对象的作用，方便跳转等操作。
在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第三方图标库使用。
在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')
                }}>跳转到详情页</Text>
            </View>
        );
    }
}

此页面在HomePage的导航器中，所以直接用props的中navigation对象进行跳转的时候需要在HomePage中缓存navigation对象才可以进行操作。