如何使用react-native-navigation将单屏应用转换为基于选项卡的应用？

Question

我正在尝试反应原生导航,但我遇到了一个简单的问题.

该应用程序有一个没有选项卡的登录页面.(非常类似于facebook登录页面)(图片参考 - 图片只是为了给出一个想法.图片礼貌 - 谷歌 用户登录后,我想转换为基于标签的应用程序,我想要两个不同的导航堆栈标签(在Quora等应用中发生)(图片参考 - 再次图像只是一个参考)

我使用mobx进行状态管理.

我知道这是一个常见的用例,但我对我所知的两个选项感到困惑 -

1. 提供对用户登录变量的反应,并从单屏应用程序更改为基于选项卡的应用程序.(唯一关注的是当isLoggedIn发生反应时缺少动画)例如 - App.js

   constructor() {
   reaction(() => auth.isLoggedIn, () => app.navigateToHome())
   reaction(() => app.root, () => this.startApp(app.root));
   app.appInitialized();
   

   }

   startApp(root){
       switch (root) {
         case 'user.login':
           Navigation.startTabBasedApp({
             tabs: [
               {
                 label: 'One',
                 screen: 'user.login',
                 icon: require('./assets/one.png'),
                 selectedIcon: require('./assets/one_selected.png'),
                 navigatorStyle: {},
               }
             ]
             screen: {
               screen: root,
               title: 'Login',
               navigatorStyle: {
                 screenBackgroundColor: colors.BACKGROUND,
                 statusBarColor: colors.BACKGROUND
               },
               navigatorButtons: {}
             }
           })
           return ;
         case 'user.home':
           Navigation.startTabBasedApp({
             tabs: [
               {
                 label: 'One',
                 screen: 'user.home',
                 icon: require('./assets/one.png'),
                 selectedIcon: require('./assets/one_selected.png'),
                 navigatorStyle: {},
               },
               {
                 label: 'Two',
                 screen: 'user.home',
                 icon: require('./assets/two.png'),
                 selectedIcon: require('./assets/two_selected.png'),
                 title: 'Screen Two',
                 navigatorStyle: {},
               }
             ],
             animationType: 'slide-down',
           });
         return;
         default:
             console.error('Unknown app root');
       }
     }
   

2. 使用单屏应用程序,但在主屏幕中实现选项卡.使用这种方法,我必须自己为两个选项卡实现不同的导航堆栈.(react-native-navigation已经实现了这一点.因此,方法1中不必担心导航堆栈)

例如 - App.js

Navigation.startSingleScreenApp({
          screen: {
            screen: root,
            title: 'Login',
            navigatorStyle: {
              screenBackgroundColor: colors.BACKGROUND,
              statusBarColor: colors.BACKGROUND
            },
            navigatorButtons: {}
          }
        })

Home.js

<Tabs>
        <Tab
          titleStyle={{fontWeight: 'bold', fontSize: 10}}
          selectedTitleStyle={{marginTop: -1, marginBottom: 6}}
          selected={true}
          renderIcon={() => <Icon containerStyle={{justifyContent: 'center', alignItems: 'center', marginTop: 12}} color={'#5e6977'} name='whatshot' size={33} />}
          renderSelectedIcon={() => <Icon color={'#6296f9'} name='whatshot' size={30} />}
          >
          <Feed />
        </Tab>
        <Tab
          titleStyle={{fontWeight: 'bold', fontSize: 10}}
          selectedTitleStyle={{marginTop: -1, marginBottom: 6}}
          selected={selectedTab === 'profile'}
          title={selectedTab === 'profile' ? 'PROFILE' : null}
          renderIcon={() => <Icon containerStyle={{justifyContent: 'center', alignItems: 'center', marginTop: 12}} color={'#5e6977'} name='person' size={33} />}
          renderSelectedIcon={() => <Icon color={'#6296f9'} name='person' size={30} />}
          onPress={() => this.changeTab('profile')}>
          <Profile />
        </Tab>
      </Tabs>

在react-native中管理选项卡的最佳实践是什么？在我的用例中我应该采用哪种方法？

Answer 1

要实现顶部选项卡，您需要启动一个单屏应用程序，然后定义顶部选项卡。您可以执行以下操作。

    Navigation.startSingleScreenApp({
     screen: 'FirstScreen'
     title: 'FirstScreenTitle'
     topTabs: [
       {
         screen:'FirstTabScreen'
       },
       {
         screen:'SecondTabScreen'
       }
     ]

    });

首先将每个选项卡注册为单独的屏幕。