React-Navigation V2 使用教程 (三) createSwitchNavigator

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u011272795/article/details/80927122

witchNavigator的目的是一次只显示一个屏幕。
默认情况下，它不处理后退操作，并在您切换时将路由重置为其默认状态。

API

createSwitchNavigator(RouteConfigs, SwitchNavigatorConfig);

RouteConfigs

路由配置对象是从路由名称到路由配置的映射，它告诉导航器为该路由提供什么，请参阅createStackNavigator的示例。

SwitchNavigatorConfig

几个选项被传递给底层路由器以修改导航逻辑：

• initialRouteName - 首次加载时初始制表符路径的routeName。
• resetOnBlur - 切换远离屏幕时重置任何嵌套导航器的状态。默认为true。
• paths - 提供routeName到path config的映射，该映射覆盖routeConfigs中设置的路径。
• backBehavior - 后退按钮是否会导致标签切换到初始路由？如果是，则设置为initialRoute，否则none。默认为none行为。

/**
 * Created by 卓原 on 2018/7/4.
 *
 */
import React from 'react'
import Ionicons from 'react-native-vector-icons/Ionicons';
import {createStackNavigator, createBottomTabNavigator, createSwitchNavigator} from 'react-navigation';
import HomeScreen from "./page/HomeScreen";
import DetailsScreen from "./page/DetailsScreen";
import SettingsPage from "./page/SettingsPage";
import SettingsPage2 from "./page/SettingsPage2";
import WelcomePage from './page/WelcomePage';

const BottomTabNavigator = createBottomTabNavigator({
    Home: HomeScreen,
    Details: DetailsScreen
}, {
    navigationOptions: ({navigation}) => ({
        tabBarIcon: ({focused, tintColor}) => {
            const {routeName} = navigation.state;
            let iconName;
            if (routeName === 'Home') {
                iconName = `ios-home${focused ? '' : '-outline'}`;
            } else if (routeName === 'Details') {
                iconName = `ios-options${focused ? '' : '-outline'}`;
            }

            // 在此处可以返回任何组件！
            // 我们通常使用react-native-vector-icons中的图标组件
            return <Ionicons name={iconName} size={25} color={tintColor}/>;
        },
    }),
    tabBarOptions: {
        activeTintColor: 'tomato',
        inactiveTintColor: 'gray',
        labelStyle: {
            fontSize: 16,
        },
        style: {
            backgroundColor: 'green',
        },
    },
});

const RootStack = createStackNavigator({
    BottomTabNavigator: {
        screen: BottomTabNavigator,
        navigationOptions: {
            header: null,
        }
    },
    Settings: {
        screen: SettingsPage
    },
    Set2: {
        screen: SettingsPage2
    }
}, {
    /* 主屏幕的标题配置现在在这里 */
    //headerMode: 'none',
    navigationOptions: ({navigation}) => ({
        title: navigation.state.routeName,
        headerStyle: {
            backgroundColor: '#f4511e',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
            fontWeight: 'bold',
        },
    })
});

const SwitchNav = createSwitchNavigator({
    welcome: WelcomePage,
    App: RootStack
});


export default SwitchNav;