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

【问题标题】：Add A Tab navigation in React Native Navigation V2在 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'
              }
            }
          },
        ]
      }
    }],
   }
 }
})

});

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

欢迎所有建议。

【问题讨论】：

标签： javascript reactjs react-native navigation react-native-navigation

【解决方案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

【讨论】：