在堆栈导航中反应本机选项卡导航不起作用

Question

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

这是我的带有堆栈导航器的 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>
  );
};

这是我的带有标签导航器的主屏幕

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

最后，这是我的 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>
    );
}

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

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

我得到以下信息：

仍然不完美（选项卡没有显示），但至少它显示了一些东西。 任何帮助表示赞赏！

Answer 1

我解决了！ 在 HomeScreen.js 组件中，我改变了这个：

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

对此：

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

删除 View contriner 使所有组件都可见！