如何使用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中的標籤有哪些最佳做法？在我的用例中，我應該使用哪種方法？

來源

2017-05-04 Ashish Dulhani

我遇到了同樣的問題 - 你是否設法到達任何地方？ – JamesG

要實現頂部選項卡，您需要啓動一個屏幕應用程序，然後定義頂部選項卡。你可以做如下的事情。

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

    });

首先將每個標籤註冊爲單個屏幕。

來源

2017-07-27 19:59:05

如何使用react-native-navigation將單屏應用程序轉換爲基於選項卡的應用程序？

回答

相關問題