Rect Naviagtion-SwitchNavigator

最新推荐文章于 2024-04-05 13:20:49 发布

举世武双

最新推荐文章于 2024-04-05 13:20:49 发布

阅读量423

点赞数

分类专栏： React-Native 我的React Native进阶之路文章标签： switchNavigator

本文链接：https://blog.csdn.net/qq_33721382/article/details/82827679

版权

React-Native 同时被 2 个专栏收录

20 篇文章 1 订阅

订阅专栏

我的React Native进阶之路

17 篇文章 2 订阅

订阅专栏

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行为。