Reactjs 堆栈导航中的反应本机选项卡导航不工作

当我试图在堆栈导航器中使用选项卡导航器时，选项卡导航器不可见。除非我在选项卡导航器上方添加文本

const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer theme={DarkTheme}>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={HomeScreen}
          options={{headerShown: false}} />

        <Stack.Screen
          name="Settings"
          component={SettingsScreen}
          options={{headerShown: false}} />

        <Stack.Screen
          name="AddItem"
          component={AddItemScreen}
          options={{headerShown:false}} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

这是我的带有堆栈导航器的App.js

const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer theme={DarkTheme}>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={HomeScreen}
          options={{headerShown: false}} />

        <Stack.Screen
          name="Settings"
          component={SettingsScreen}
          options={{headerShown: false}} />

        <Stack.Screen
          name="AddItem"
          component={AddItemScreen}
          options={{headerShown:false}} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

const Stack=createStackNavigator（）；
常量应用=（）=>{
返回(
);
};

这是我的带有选项卡导航器的主屏幕

export default HomeScreen = ({navigation}) => {
    return (
        <View style={{alignSelf: 'baseline'}}>
          <TabNavigation />
        </View>
    )
}

导出默认主屏幕=（{navigation}）=>{
返回(
)
}

最后，这是我的TabNavigator

const Tabs = createMaterialTopTabNavigator();

export default function TabNavigation(){
    return(
        <NavigationContainer independent={true} theme={DarkTheme}>
            <Tabs.Navigator>
                <Tabs.Screen name="Todo" component={TodoView} />
                <Tabs.Screen name="Completed" component={CompletedView} />
            </Tabs.Navigator>
        </NavigationContainer>
    );
}

const Tabs=createMaterialTopTabNavigator（）；
导出默认函数TabNavigation（）{
返回(
);
}

目前我得到一个空白的黑屏。在选项卡导航器上添加文本块时，如下所示：

export default HomeScreen = ({navigation}) => {
    return (
        <View style={{alignSelf: 'baseline'}}>
          <Text>Test</Text>
          <TabNavigation />
        </View>
    )
}

导出默认主屏幕=（{navigation}）=>{
返回(
测验
)
}

我得到以下信息：

仍然不完美（标签没有显示），但至少它显示了一些东西。

---

感谢您的帮助

我解决了！在HomeScreen.js组件中，我更改了以下内容：

export default HomeScreen = () => {
    return (
        <View>
          <TabNavigation />
          <FabButtons />
        </View>
    )
}

导出默认主屏幕=（）=>{
返回(
)
}

为此：

export default HomeScreen = () => {
    return (
        <>
          <TabNavigation />
          <FabButtons />
        </>
    )
}

导出默认主屏幕=（）=>{
返回(
)
}

---

删除视图管理器使所有组件都可见

实际上，您不需要将

Tabs.Navigator

包装在

NavigationContainer

中。你能尝试移除NavigationContainer并进行检查吗？@Akki尝试了，但没有成功，仍然只是一个黑屏……你能通过CodeSandbox共享代码吗？我想看一下。不知道这是否正确，创建了一个react项目并添加了所需的大部分内容。但多森似乎在逃跑。很可能是我做错了什么。但无论如何，这就是：