Rect Naviagtion-SwitchNavigator

一、用途

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

举个例子，我们进入APP时会有一个广告页，过了几秒后可以跳转到主页面，如果你在主界面点击返回键，就会退出APP而不是返回到广告页面。从广告页面跳转到主界面，使用的就是类似于switchNavigator。

二、使用API和配置

React-navigation 2.x版本以前使用SwitchNavigator这个方法创建SwitchNavigator，React-navigation 2.x以后新增了createSwitchNavigator方法来创建SwitchNavigator。这两个方法的参数配置并无二致，都是一样的。createSwitchNavigator方法定义如下：

createSwitchNavigator(RouteConfigs, SwitchNavigatorConfig);

（1）RouteConfigs：路由配置对象是从路由名称到路由配置的映射。下面来看一段Demo代码：

const MySwitchNavigator  = createSwitchNavigator(
    {
        LanuchPage:{
            screen:LanuchPage,
        },
        MainPage:MainPage,
        LoginPage:LoginPage,
    },
    {
        initialRouteName:"LanuchPage",
    }
);

其中的LanuchPage、MainPage和LoginPage就是配置页面的映射。代码中初始化页面为LanuchPage。

（2）SwitchNavigatorConfig

①initialRouteName：初始化显示的界面。

②resetOnBlur：切换离开屏幕时，重置所有嵌套导航器的状态。 默认为true。

③paths：提供 routeName 到 path 配置的映射, 它重写 routeConfigs 中设置的路径。

④backBehavior：控制 "返回" 按钮是否会导致 Tab 页切换到初始 Tab 页? 如果是, 设置为 initialRoute, 否则 none。 默认为none行为。

三、Demo

Github地址：

https://github.com/chenliwu/MyReactNavigationDemo

相关库版本：

"react": "16.3.0-alpha.1",

"react-native": "0.54.2",

"react-navigation": "^2.13.0"

参考文档：

https://reactnavigation.org/docs/zh-Hans/switch-navigator.html