Question

我正在使用React Navigation v5，我有一个带几个屏幕的抽屉式导航器，但是现在我遇到了问题。我有一个配置文件屏幕，我不想显示在抽屉式导航器上，所以我想我必须在此配置文件屏幕上使用堆栈导航器。但是我不知道如何连接这两个导航器以及在它们之间进行导航的能力。我该怎么做呢？我的代码是：


const StackNavigator = createStackNavigator();

export const MyStackNavigator = () => {
  const { user, setUser } = useContext(AppContext);
  return (
    <StackNavigator.Navigator>
      {user && <StackNavigator.Screen name="Profile" component={Profile} />}
    </StackNavigator.Navigator>
  );
};

const DrawerNavigator = createDrawerNavigator();

export const AppNavigator = () => {
  const { user, setUser } = useContext(AppContext);
  return (
    <DrawerNavigator.Navigator
      drawerContent={(props) => {
        return (
          <SafeAreaView
            style={{ flex: 1, paddingTop: Platform.OS === "android" ? 50 : 20 }}
          >
            <View
              style={{
                alignItems: "center",
                justifyContent: "center",
              }}
            >
              {!user ? (
                <View style={{ marginBottom: 20 }}>
                  <Image
                    source={require("../assets/logo.png")}
                    resizeMode="contain"
                    style={{ width: 75, height: 75 }}
                  />
                  <Text
                    style={{
                      textAlign: "center",
                      fontSize: 25,
                      color: "red",
                    }}
                  >
                    Couples.dk
                  </Text>
                </View>
              ) : (
                <View style={{ marginBottom: 20, alignItems: "center" }}>
                  <Image
                    source={{ uri: config.SERVER_URL + user.profileImagePath }}
                    style={{
                      width: 75,
                      height: 75,
                      borderRadius: 50,
                      marginBottom: 10,
                    }}
                  />
                  <Button title="Se Profil" color="#F44336" />
                </View>
              )}
            </View>
            <DrawerItemList {...props} />
            <View style={{ flex: 1, justifyContent: "flex-end" }}>
              <Button onPress={() => {}} title="Logout" color="#F44336" />
            </View>
          </SafeAreaView>
        );
      }}
    >
      {!user && <DrawerNavigator.Screen name="Login" component={Login} />}
      {user && (
        <DrawerNavigator.Screen name="Søg Brugere" component={BrowseUsers} />
      )}
      {user && <DrawerNavigator.Screen name="Match" component={Match} />}
      {user && <DrawerNavigator.Screen name="Chat" component={Chat} />}
      {user && (
        <DrawerNavigator.Screen name="Favoritter" component={Favorites} />
      )}
    </DrawerNavigator.Navigator>
  );
};

和在app.js中

  return (
    <AppContext.Provider
      value={{
        user,
        setUser,
        socket,
        setSocket,
        onlineUsers,
        setOnlineUsers,
        pushToken,
        setPushToken,
        activeConversation,
        setActiveConversation,
      }}
    >
      {initiated && (
        <NavigationContainer>
          <AppNavigator />
        </NavigationContainer>
      )}
    </AppContext.Provider>
  );

Answer 1

我通过在抽屉式导航器的屏幕上添加选项来解决此问题：

   {user && (
        <DrawerNavigator.Screen
          name="Profile"
          component={Profile}
          options={{
            drawerLabel: () => null,
            title: null,
            drawerIcon: () => null,
          }}
        />
      )}

如何在React Native应用中实现屏幕而不将其添加到抽屉导航器中？

1 个答案: