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

问题描述：

我正在尝试使用react-native-navigation，但我陷入了一个简单的问题。如何使用react-native-navigation将单屏应用程序转换为基于选项卡的应用程序？

该应用有一个没有标签的登录页面。（非常类似于Facebook登录页面）（图片编号- The image is just to give an idea. Image Courtesy - Google 用户登录后，我想要转换为基于选项卡的应用程序，并且我希望为这两个选项卡使用不同的导航堆栈（因为它发生在像Quora）（图片定 - Again Image is just a reference）

我使用mobx状态管理

我知道它是一个常见的情况，但我知道我这两个选项之间的困惑 -

提供对用户登录变量的响应，并从单屏幕应用更改为基于选项卡的应用。（唯一要担心的是缺乏动画当isLoggedIn反应发生） EG - 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'); 
    } 
    }

使用单屏应用程序，但落实在主屏幕选项卡。使用这种方法，我必须自己为两个选项卡实现不同的导航堆栈。（反应本地导航已实现此所以，在方法1中没有关于忧虑导航堆栈。）

EG - 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中的标签有哪些最佳做法？在我的用例中，我应该使用哪种方法？

我遇到了同样的问题 - 你是否设法到达任何地方？ – JamesG

答

要实现顶部选项卡，您需要启动一个屏幕应用程序，然后定义顶部选项卡。你可以做如下的事情。

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

    });

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

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

相关推荐