Wie konvertiert man Einzelbild-App auf Tab-basierte App mit react-native-Navigation?

Question

Ich versuche meine Hände auf reactive-native-Navigation, aber ich bin mit einem einfachen Problem fest.

Die App verfügt über eine Anmeldeseite ohne Registerkarten. (sehr ähnlich wie Facebook Login-Seite) (Bild ref - The image is just to give an idea. Image Courtesy - Google Nachdem der Benutzer anmeldet, möchte ich zu einer Tab-basierten App konvertieren, und ich möchte verschiedene Navigationstapel für beide Tabs (wie es in Apps wie Quora passiert)) (Bild - ref. Again Image is just a reference)

ich verwende mobx für die staatliche Verwaltung

ich weiß, es ist ein häufiger Anwendungsfall, aber ich bin verwirrt zwischen den beiden mir bekannten Optionen -

1. reagieren auf die Benutzeranmeldevariable und wechseln von der Einzelbild-App zur tab-basierten App. (Die einzige Sorge ist der Mangel an Animation, wenn die Reaktion auf isLoggedIn geschieht) 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'); 
       } 
       } 
   

2. Verwenden einzigen Bildschirm App aber implementieren Registerkarten im Home-Bildschirm . Bei dieser Methode müsste ich für beide Tabs unterschiedliche Navigationsstapel implementieren. (Reagieren-native-Navigation bereits implementiert diese also keine Sorgen in Verfahren 1 in Bezug auf Navigationsstapel.)

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> 

Was sind die besten Vorgehensweisen bei der Verwaltung von Registerkarten im reaktionsnativen System? Und in meinem Anwendungsfall mit welcher Methode sollte ich gehen?

Answer 1

Um die obersten Registerkarten zu erreichen, müssen Sie eine einzelne Bildschirm-App starten und dann die oberen Registerkarten definieren. Sie können so etwas wie folgt tun.

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

    }); 

Registrieren Sie die einzelnen Registerkarten zuerst als einzelne Bildschirme.