Question

因此，正如标题所示，我正在尝试创建抽屉式导航器，该导航器的内部带有一个带有bottomTabNavigator的屏幕。抽屉导航器工作正常，但是当我输入包含选项卡导航器的路线时，它是空的。这是我的代码

带有抽屉导航的组件：

//imports...
const Burger = ({ navigation }) => (
  <View style={styles.burger}>
    <TouchableOpacity onPress={navigation.toggleDrawer}>
      <MaterialCommunityIcons name="forwardburger" size={24} color="black" />
    </TouchableOpacity>
  </View>
);

const Home = ({ navigation }) => (
  <SafeAreaView style={styles.view}>
    <Burger navigation={navigation} />
    <HomeScreen />
  </SafeAreaView>
);

const Auth = ({ navigation }) => (
  <SafeAreaView style={styles.view}>
    <Burger navigation={navigation} />
    <AuthScreen />
  </SafeAreaView>
);

const Project = ({ navigation }) => (
  <SafeAreaView style={styles.view}>
    <Burger navigation={navigation} />
    <CreateProject />
  </SafeAreaView>
);

const Drawer = createDrawerNavigator();

function Navigation() { // main drawer navigation

  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Home" component={Home} />
        <Drawer.Screen name="Project" component={Project} /> // screen with bottom tab navigation
        <Drawer.Screen name="Auth" component={Auth} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

export default function App() {
  return (
    <SafeAreaProvider>
        <Navigation />
    </SafeAreaProvider>
  );
}

带有底部标签导航器的Aaaaand组件：

const Tab = createBottomTabNavigator();

const CreateProject = ({ navigation }) => {
  console.log('navigation', navigation);
  return (
    <Tab.Navigator
      initialRouteName="Description"
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let icon;
          switch (route.name) {
            case 'Description': {
              const iconName = focused ? 'subtitles' : 'subtitles-outline';
              icon = (
                <MaterialCommunityIcons
                  name={iconName}
                  size={size}
                  color={color}
                />
              );
              break;
            }
            case 'Content': {
              const iconName = focused
                ? 'table-column'
                : 'table-column-plus-after';
              icon = (
                <MaterialCommunityIcons
                  name={iconName}
                  size={size}
                  color={color}
                />
              );
              break;
            }
            case 'Goals': {
              const iconName = focused ? 'target' : 'target-variant';
              icon = (
                <MaterialCommunityIcons
                  name={iconName}
                  size={size}
                  color={color}
                />
              );
              break;
            }
            default: {
              const iconName = focused ? 'cash-multiple' : 'cash';
              icon = (
                <MaterialCommunityIcons
                  name={iconName}
                  size={size}
                  color={color}
                />
              );
            }
          }

          return icon;
        },
      })}
      tabBarOptions={{
        activeTintColor: 'tomato',
        inactiveTintColor: 'gray',
      }}
    >
      <Tab.Screen name="Description" component={Description} />
      <Tab.Screen name="Content" component={Content} />
      <Tab.Screen name="Goals" component={Goals} />
      <Tab.Screen name="Prizes" component={Prizes} />
    </Tab.Navigator>
  );
};

export default CreateProject;

所以。所有抽屉式路由都工作正常，其中之一具有事件堆栈导航器，也可以正常工作。但是，当我输入“底部选项卡路线”时，屏幕上没有任何内容。没有任何子路由的内容，没有底部选项卡，没有任何内容（也没有错误）我在哪里犯错了？

Answer 1

我找到了解决方案。问题是我将Tab导航器放在SafeAreaView中。那使得看不到它。 TabNavigator应该直接作为DrawerNavigator屏幕传递

React-native-标签导航器嵌套在抽屉中

1 个答案: