在 React Native Navigation V2 中添加选项卡导航

Posted 2023-04-13

【中文标题】在 React Native Navigation V2 中添加选项卡导航

【英文标题】：Add A Tab navigation in React Native Navigation V2

【发布时间】：2018-12-27 11:31:39

【问题描述】：

我正在尝试让导航在我的 React Native 应用程序中工作。我已经安装了 V2。以下设置不显示任何选项卡。

Navigation.events().registerAppLaunchedListener(()=>
Navigation.setRoot(
root: 
  topTabs: 
    children:[
      stack: 
        children: [
          
            component: 
              name: 'news.MainScreen',
              text: 'tab1',
              passProps: 
                text: 'This is tab 1'
              ,
              options: 
                topTab: 
                  text: "tab 1",
                  testID: 'NO_IDEA'
                
              

            ,
          ,
          
            component: 
              name: 'news.SplashScreen',
              text: 'tab2',
              passProps: 
                text: 'This is tab 6'
              
            ,
            options: 
              topTab: 
                text: "tab 21",
                testID: 'NO_IDEA_1'
              
            
          ,
        ]
      
    ],
   
 
)

);

当我编译我的应用程序时，结果如下：

欢迎所有建议。

【参考方案1】：

看起来你只有一个水龙头孩子。仅尝试第一个选项卡（点击时没有堆栈）

Navigation.setRoot(
      root: 
                topTabs: 
                children: [
                  
                    component: 
                      name: "screens.tab1",
                      options: 
                        topTab: 
                          title: "Tab 1"
                        
                      
                    
                  ,
                  
                    component: 
                      name: "screens.tab2",
                      options: 
                        topTab: 
                          title: "Tab 2"
                        
                      
                    
                  ,
                  
                    component: 
                      name: "screens.tab3",
                      options: 
                        topTab: 
                          title: "Tab 3"
                        
                      
                    
                  
                ]
              
      
    );

【参考方案2】：

此处报告此问题：https://github.com/wix/react-native-navigation/issues/4485

从文档中，您可以按以下方式进行：

Navigation.setRoot(
 root: 
  topTabs: 
   children: [
    stack: 
      children: [
        component: 
          name: 'example.FirstTabScreen',
          passProps: 
            text: 'This is tab 1'
          
        
      ],
      options: 
        topTab: 
          text: 'Tab 1',
          icon: require('../images/one.png'),
          testID: 'FIRST_TAB_BAR_BUTTON'
        
      
    
  ,
  
    component: 
      name: 'navigation.playground.TextScreen',
      passProps: 
        text: 'This is tab 2'
      ,
      options: 
        topTab: 
          text: 'Tab 2',
          icon: require('../images/two.png'),
          testID: 'SECOND_TAB_BAR_BUTTON'
        
      
    
  ]


);

有关更多信息，请参阅文档：https://wix.github.io/react-native-navigation/#/docs/top-level-api