如何将顶部选项卡添加到 Navigation.startTabBasedApp 中未定义的屏幕？

Question

我想在我的 react-native 应用程序的一个屏幕中添加顶部选项卡。我正在使用 react-native-navigation 进行导航。我可以使用 Navigation.startTabBasedApp 中定义的任何屏幕轻松访问它，这意味着任何屏幕也是我的底部选项卡之一。

我希望屏幕上的顶部选项卡不是底部选项卡之一。这是我现在尝试的方法

Navigation.startSingleScreenApp({
    screen: {
      screen: 'screen',
      title: 'screen'
    },
    TopTabRootScreen: {
      screen: 'ToptabRoot',
      title: 'ToptabRoot',
      navigatorStyle: {},
      topTabs: [
        {
          screenId: 'toptab1',
          icon: icon
        },
        {
          screenId: 'toptab2',
          icon: icon
        }]
    }
  });

我发现 react-native-navigation 的 documentation 非常缺乏，这就是为什么我不确定为什么上面的代码不起作用。

我还像这样启动一个基于标签的应用程序：

 Navigation.startTabBasedApp({
tabs: [
  {
    label: 'tab1',
    screen: 'tab1',
    icon: icon,  
    selectedIcon: icon,
    },
    title: 'tab1',
    navigatorStyle: {}, 
    navigatorButtons: {} 
  },
  {
    label: 'tab2',
    screen: 'tab2',
    icon: Icon,
    selectedIcon: Icon,
    title: 'tab2'
  },
  {
    label: 'tab3',
    screen: 'tab3',
    icon: Icon,
    selectedIcon: Icon,
    title: 'tab3'
  {
    label: 'tab4',
    screen: 'tab4',
    icon: Icon,
    selectedIcon: Icon,
    title: 'tab4',
    navigatorButtons: 
   }
 });

我觉得在屏幕内可能是可行的

static navigatorStyle = {
};

但不知道那会是什么样子。任何有关如何执行此操作的帮助将不胜感激。

Answer 1

example app 中有一个示例 topTabs 屏幕

this.props.navigator.push({
  screen: 'example.Types.TopTabs',
  title: 'Top Tabs',
  topTabs: [{
    screenId: 'example.Types.TopTabs.TabOne',
    title: 'Tab One',
  }, {
    screenId: 'example.Types.TopTabs.TabTwo',
    title: 'Tab Two',
  }],
});