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贡献者使所有组件可见！

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

1 个答案: