首页 文章

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

提问于
浏览 次
6

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

该应用程序有一个登录页面，没有标签 . （非常类似于facebook登录页面）（图片参考 - The image is just to give an idea. Image Courtesy - Google用户登录后，我想转换为基于标签的应用程序，我想要两个标签的不同导航堆栈（因为它发生在像 Quora 这样的应用程序中）（图像ref - Again Image is just a reference）

我正在使用mobx进行状态管理 .

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

  • 对用户登录变量做出反应，并从单屏幕应用程序更改为基于选项卡的应用程序 . （唯一关注的是当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');
    }
  }
  • 使用单屏应用程序，但在主屏幕中实现选项卡 . 使用这种方法，我必须自己为两个选项卡实现不同的导航堆栈 . （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中管理选项卡的最佳实践是什么？在我的用例中，我应该选择哪种方法？

react-native mobx mobx-react react-native-navigation

2 回答

  • 0

    要实现顶部选项卡，您需要启动单个屏幕应用程序，然后定义顶部选项卡 . 你可以在下面做这样的事情 .

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

    });

    首先将每个标签注册为单个屏幕 .

    回复于
  • 0

    从 Navigation.startSingleScreenApp() 开始，然后移至 Navigation.startTabBasedApp() （选项1）是推荐的方法 .

    你说的唯一问题是选项1中没有动画，但实际上你有这个选项：向新的导航器对象添加一个过渡动画：

    Navigation.startTabBasedApp({
  // ...
  animationType: 'slide' // optional, add transition animation to root change: 'none', 'slide-down', 'fade'
})

    在startSingleScreenApp和startTabBasedApp中查找文档中的animationType属性 .

    回复于

相关问题