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

时间:2020-03-30 12:40:10

标签: reactjs react-native react-navigation react-navigation-stack react-android

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

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

我得到以下信息:

enter image description here

仍然不完美(选项卡未显示),但至少它显示了一些东西。 任何帮助表示赞赏!

1 个答案:

答案 0 :(得分:1)

我解决了!在HomeScreen.js组件中,我对此进行了更改:

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

对此:

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

删除View贡献者使所有组件可见!