TabNavigator 中的 TabNavigator

Question

使用 react-native 和 react-navigation，我怎样才能让我的一个选项卡成为一个额外的 TabNavigator，但以某种方式覆盖现有的选项卡？

以下是我想要的导航器配置的概要。 但是，“AddNavigator”显示为我现有选项卡顶部的选项卡。但我希望他们能遮住这些标签。

export const AddNavigator = TabNavigator({
  AddPhoto: { screen: AddPhoto },
  AddText: { screen: AddText },
}, { mode: 'modal', headerMode: 'none' });

export const Tabs = TabNavigator({
  TabHome: { screen: TabHome },
  TabAdd: { screen: AddNavigator },
  TabProfile: { screen: TabProfile }
});

export const Root = StackNavigator({
  SplashScreen: { screen: SplashScreen },
  LoginScreen: { screen: LoginScreen },
  SignupScreen: { screen: SignupScreen },

  Tabs: { screen: Tabs },

}, { mode: 'modal', headerMode: 'none' });

作为参考，请考虑 Instagram 应用。 当您单击中间的选项卡（添加照片）时，您会看到一个额外的选项卡导航器，要求您选择“图库、照片或视频” Screenshot

Answer 1

要模拟您对 instagram 的引用，您可以这样做：

export const Tabs = TabNavigator({
    TabHome: { screen: TabHome },
    TabAdd: {
        screen: AddNavigator,
        navigationOptions: {
            tabBarVisible: false
        }
    },
    TabProfile: { screen: TabProfile }
});