React native中的嵌套选项卡导航

Question

我正在尝试在react native中使用嵌套选项卡，并且我被困在这里大约2天了。

基本上，我想说的是，从主页转到音乐页面在音乐页面上，我显示了2个标签或按钮“照片”和“视频”然后点击“照片”，显示“照片”，点击“视频”标签，显示视频。页面的其余部分保持不变，唯一更改的是选项卡内容，具体取决于单击的选项卡。

所以，我确实很难尝试实现这一目标。如果它只是一个React应用程序，那将是5分钟的事情，但是这似乎真的很困难。

以下是一些相关代码：

const PhotoNestStack = createMaterialTopTabNavigator({
    Photos:{screen:Photos},
    Videos:{screen: Videos}
});

const PhotoContainer = createAppContainer(
    createSwitchNavigator({
        Tabs: PhotoNestStack
    })
);

export default function PhotoVideoScreen() {
  return (
    <View style={styles.containerStyle}>
        <Text> This is Photo Video Screen</Text>
        <Text> Videos</Text>
        <PhotoContainer />
    </View>
  );
}

现在，使用上面的代码。页面上的其他内容显示出来，但是选项卡不显示。

我已经设置了这样的导航

const config = Platform.select（{网络：{headerMode：“屏幕”}，默认值：{}，}）;

const HomeStack = createStackNavigator(
  {
    Home: HomeScreen,
    Music: MusicScreen,
    PostStory: PostStoryScreen,
    PhotoVideo: PhotoVideoScreen
  },
  config
);

我想要的选项卡在PhotoVideoScreen上，但是没有显示，但是PhotoVideoScreen上的其余内容确实显示了。所以，我在哪里错了？

Answer 1

我签出了导航选项和内容here，但没有看到您在切换导航器中使用的Tabs。我认为您应该将它们放在一起；

const PhotoContainer = createAppContainer(
    createSwitchNavigator({
        createMaterialTopTabNavigator({
            Photos:{screen:Photos},
            Videos:{screen: Videos}
    })
);