目录

• App导航
• createSwitchNavigator
• createBottomTabNavigator（底部导航）
• createMaterialTopTabNavigator（顶部导航）
• createStackNavigator

createSwitchNavigator

SwitchNavigator 的用途是一次只显示一个页面。 默认情况下，它不处理返回操作，并在你切换时将路由重置为默认状态。
API

createSwitchNavigator(RouteConfigs, SwitchNavigatorConfig):

• RouteConfigs(必选，同createStackNavigator的RouteConfigs)：路由配置对象是从路由名称到路由配置的映射，告诉导航器该路由呈现什么。
• SwitchNavigatorConfig (可选)：配置导航器的路由;
  • initialRouteName -第一次加载时初始选项卡路由的 routeName。
  • resetOnBlur - 切换离开屏幕时，重置所有嵌套导航器的状态。 默认为true。
  • paths - 提供 routeName 到 path 配置的映射, 它重写 routeConfigs 中设置的路径。
  • backBehavior - 控制 “返回” 按钮是否会导致 Tab 页切换到初始 Tab 页? 如果是, 设置为 、initialRoute, 否则 none。 默认为none行为

项目中使用
创建一个createSwitchNavigator类型的导航器

// 欢迎页
const InitNavigator = createStackNavigator({
    WelcomePage: {
        screen: WelcomePage,
        navigationOptions: {
            header: null,// 可以通过将header设为null 来禁用StackNavigator的Navigation Bar
        }
    }
});
// 其他页面
const MainNavigator = createStackNavigator({...}, {
    defaultNavigationOptions: {
        header: null,// 可以通过将header设为null 来禁用StackNavigator的Navigation Bar
    }
});
// 根Navigator
export const RootNavigator = createAppContainer(createSwitchNavigator({
    Init: InitNavigator,// 欢迎页
    Main: MainNavigator,// 其他页面
}, {
    navigationOptions: {
        header: null,// 可以通过将header设为null 来禁用StackNavigator的Navigation Bar
    }
}));

界面跳转工具类

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
            }
        )
    }

    /**
     * 返回上一页
     */
    static goBack(navigation) {
        navigation.goBack();
    }
    /**
     * 重置到首页
     */
    static resetToHomPage(params) {
        const {navigation} = params;
        navigation.navigate("Main");
    }
}

createBottomTabNavigator

相当于iOS里面的TabBarController，屏幕下方的标签栏。

image.png
API

createBottomTabNavigator(RouteConfigs, BottomTabNavigatorConfig):

• RouteConfigs(必选)：路由配置对象是从路由名称到路由配置的映射，告诉导航器该路由呈现什么。
• BottomTabNavigatorConfig(可选)：配置导航器的路由(如：默认首屏，navigationOptions，paths等)样式(如，转场模式mode、头部模式等)。

项目中使用

  _tabNavigator() {
        if (this.Tabs) {
            return this.Tabs;
        }
        const {PopularPage, TrendingPage, FavoritePage, MyPage} = TABS;// Tab列表
        const tabs = {PopularPage, TrendingPage, FavoritePage, MyPage};//根据需要定制显示的tab
        PopularPage.navigationOptions.tabBarLabel = '最热';//动态配置Tab属性
        return this.Tabs = createAppContainer(createBottomTabNavigator(tabs, {
                tabBarComponent: props => {
                    return <TabBarComponent theme={this.props.theme} {...props}/>
                }
            }
        ))
    }

createMaterialTopTabNavigator

image.png
API

createMaterialTopTabNavigator(RouteConfigs, TabNavigatorConfig):

• RouteConfigs(必选)：路由配置对象是从路由名称到路由配置的映射，告诉导航器该路由呈现什么。
• TabNavigatorConfig(可选)：配置导航器的路由(如：默认首屏，navigationOptions，paths等)样式(如，转场模式mode、头部模式等

从createMaterialTopTabNavigator API上可以看出createMaterialTopTabNavigator 支持通过RouteConfigs和 TabNavigatorConfig 两个参数来创建createMaterialTopTabNavigator导航器。
项目中使用

const TabNavigator = keys.length ? createAppContainer(createMaterialTopTabNavigator(
            this._genTabs(), {
                tabBarOptions: {
                    tabStyle: styles.tabStyle,
                    upperCaseLabel: false,//是否使标签大写，默认为true
                    scrollEnabled: true,//是否支持 选项卡滚动，默认false
                    style: {
                        backgroundColor: theme.themeColor,//TabBar 的背景颜色
                        height: 30//fix 开启scrollEnabled后再Android上初次加载时闪烁问题
                    },
                    indicatorStyle: styles.indicatorStyle,//标签指示器的样式
                    labelStyle: styles.labelStyle,//文字的样式
                },
                lazy: true
            }
        )) : null;

 _genTabs() {
        const tabs = {};
        const {keys, theme} = this.props;
        keys.forEach((item, index) => {
            if (item.checked) {
                tabs[`tab${index}`] = {
                    screen: props => <PopularTabPage {...props} tabLabel={item.name} theme={theme}/>,
                    navigationOptions: {
                        title: item.name
                    }
                }
            }
        });
        return tabs;
    }

• 获取navigation：

const {navigation} = this.props;

• 通过navigate(routeName, params, action)进行页面跳转：

navigation.navigate('Page2');
navigation.navigate('Page3',{ name: 'Devio' });

• 动态添加Tab页

1. Tab的信息是AsyncStorage存储。已key-value键值对存储
2. 在Search页面添加Tab页，调用AsyncStorage存储新的key。
3. 在退出Search页面发出新的Action更新标签。

createStackNavigator

createStackNavigator 提供APP屏幕之间切换的能力，它是以栈的形式还管理屏幕之间的切换，新切换到的屏幕会放在栈的顶部。
转场风格：默认情况下，createStackNavigator提供了转场过渡效果，在Android和iOS上过渡效果是不同的，这也是React Native重平台性的一个体现，在Android上从屏幕底部淡入，在iOS上是从屏幕的右侧划入，当然你也可以通过配置让StackNavigator支持屏幕从底部滑入的效果。
API

createStackNavigator(RouteConfigs, StackNavigatorConfig):

• RouteConfigs(必选)：路由配置对象是从路由名称到路由配置的映射，告诉导航器该路由呈现什么。
• StackNavigatorConfig(可选)：配置导航器的路由(如：默认首屏，navigationOptions，paths等)样式(如，转场模式mode、头部模式等)。

项目中使用
向DetailPage中传入参数，动态设置Detail页面的内容。Detail通过Params改变内容

onSelect={(callback) => {
               NavigationUtil.goPage({
                   theme,
                   projectModel: item,
                   flag: FLAG_STORAGE.flag_popular,
                   callback,
               }, 'DetailPage')
           }}

参考

『React Navigation 3x系列教程』createBottomTabNavigator开发指南
『React Navigation 3x系列教程』createMaterialTopTabNavigator开发指南
『React Navigation 3x系列教程』之createStackNavigator开发指南