如何将顶部选项卡添加到 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',
  }],
});

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

How to add top tabs to a screen which is not defined in Navigation.startTabBasedApp?

tabs

android

ios

react-native

react-native-navigation