Làm cách nào để chuyển đổi ứng dụng màn hình đơn thành ứng dụng dựa trên tab bằng cách sử dụng điều hướng gốc phản ứng?

Question

Tôi đang cố gắng thực hiện điều hướng gốc phản ứng nhưng tôi bị kẹt với một vấn đề đơn giản.

Ứng dụng có trang đăng nhập không có tab. (hình ảnh ref - The image is just to give an idea. Image Courtesy - Google Sau khi người dùng đăng nhập, tôi muốn chuyển đổi sang ứng dụng dựa trên tab và tôi muốn ngăn xếp điều hướng khác nhau cho cả hai tab (như nó xảy ra trong các ứng dụng như Quora) (ảnh ref -. Again Image is just a reference)

tôi đang sử dụng mobx quản lý nhà nước

tôi biết một trường hợp sử dụng phổ biến nhưng tôi lẫn lộn giữa hai lựa chọn cho tôi biết -

1. cung cấp phản ứng cho biến đăng nhập của người dùng và thay đổi từ ứng dụng màn hình đơn thành ứng dụng dựa trên tab. (Mối quan tâm duy nhất là sự thiếu hoạt hình khi phản ứng trên isLoggedIn xảy ra) Ví dụ - 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. Sử dụng ứng dụng màn hình duy nhất nhưng thực hiện các tab trong màn hình chính . Với phương pháp này, tôi sẽ phải thực hiện ngăn xếp điều hướng khác nhau cho cả hai tab một mình. (Phản ứng bản địa-navigation đã thực hiện điều này Vì vậy, không phải lo lắng trong phương pháp 1 về hướng stack.)

Ví dụ - 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> 

Các phương pháp hay nhất trong việc quản lý các tab trong phản ứng gốc là gì? Và trong trường hợp sử dụng của tôi, tôi nên đi theo phương pháp nào?

Answer 1

Để đạt được các tab trên cùng, bạn cần bắt đầu một ứng dụng màn hình và sau đó xác định các tab trên cùng. Bạn có thể làm một cái gì đó như thế này dưới đây.

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

    }); 

Đăng ký từng tab dưới dạng màn hình riêng lẻ trước.