亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

『React Navigation 3x系列教程』createSwitchNavigator開發指南

標簽:
React Native

这篇文章将向大家分享createSwitchNavigator的一些开发指南和实用技巧。

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

createSwitchNavigator(RouteConfigs, SwitchNavigatorConfig):

  • RouteConfigs(必选,同createStackNavigator的RouteConfigs):路由配置对象是从路由名称到路由配置的映射,告诉导航器该路由呈现什么。
  • SwitchNavigatorConfig(可选):配置导航器的路由;

几个被传递到底层路由以修改导航逻辑的选项:

  • initialRouteName -第一次加载时初始选项卡路由的 routeName。
  • resetOnBlur - 切换离开屏幕时,重置所有嵌套导航器的状态。 默认为true。
  • paths - 提供 routeName 到 path 配置的映射, 它重写 routeConfigs 中设置的路径。
  • backBehavior - 控制 “返回” 按钮是否会导致 Tab 页切换到初始 Tab 页? 如果是, 设置为 initialRoute, 否则 none。 默认为none行为。

多数应用程序都要求用户通过某种方式进行身份验证才能访问与用户或其他私人内容相关的数据。 通常情况下,流程如下所示:

  • 用户打开应用。
  • 该应用程序从持久存储中加载某个身份验证状态(例如,AsyncStorage)。
  • 当状态被加载时,根据是否加载有效的认证状态,向用户呈现认证页面或主页面。
  • 当用户注销时,我们清除认证状态并跳转到认证页面。
  • 注意:我们说“认证页面”,因为通常有不止一个。 您可能会有一个主页面,其中包含用户名和密码字段,一个用于“忘记密码”的页面,一个用于注册的页面。

createSwitchNavigator

const AppStack = createStackNavigator({
    Home: {
        screen: HomePage
    },
    Page1: {
        screen: Page1
    }
});
const AuthStack = createStackNavigator({
    Login: {
        screen: Login
    },
},{
    navigationOptions: {
        // header: null,// 可以通过将header设为null 来禁用StackNavigator的Navigation Bar
    }
});

export default createSwitchNavigator(
    {
        Auth: AuthStack,
        App: AppStack,
    },
    {
        initialRouteName: 'Auth',
    }
);
 const {navigation} = this.props;
 ...
 <Button
    title="Login"
    onPress={() => {
        navigation.navigate('App');
    }}
/>

类似上述的应用场景有很多,大家可以通过与本课程配套的实战课程进行进一步学习react-navigation的高级应用

點擊查看更多內容
7人點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消