如何在React Native DrawerNavigation中添加注销功能

Question

我在我的Profile页面上创建了一个

（它是我的底部TabNavigator中的三个之一）。我正在尝试在抽屉中添加注销项目。我可以添加一个项目（可能是错误的方式），但无法在单击它时实现注销功能。

这是我的代码

    ...imports
    const Drawer = createDrawerNavigator();
    export default function DrawerGroup() {
      const nav = useNavigation();
      return (
        <Drawer.Navigator
          screenOptions={{
            drawerPosition: "right",
            headerTitleAlign: "center",
            headerTitleStyle: { color: "black", fontSize: 24, fontWeight: "600" },
            headerStyle: {
              backgroundColor: "transparent",
              borderWidth: 0,
            },
            headerRight: () => (
              <Entypo
                name="menu"
                color="#000"
                size={30}
                style={{ ...styles.icon, paddingRight: 15 }}
                onPress={() => nav.dispatch(DrawerActions.toggleDrawer())}
              />
            ),
            headerLeft: () => (
              <FontAwesome5
                name="chevron-left"
                color="#000"
                size={24}
                style={{ ...styles.icon, paddingLeft: 15 }}
                onPress={() => nav.goBack()}
              />
            ),
          }}
        >
          <Drawer.Screen
            name="Profile"
            component={Profile}
            options={{
              //change the configuration of our screen
              drawerIcon: ({ color, number, focused }) => {
                return (
                  <MaterialCommunityIcons name="account" size={24} color="black" />
                );
              },
            }}
          />
          <Drawer.Screen
            name="Manage Address"
            component={ManageAddress}
            options={{
              drawerIcon: ({ color, number, focused }) => {
                return <MaterialIcons name="my-location" size={24} color="black" />;
              },
            }}
          />
          <Drawer.Screen
            name="Refer a Friend"
            component={RefferalScreen}
            options={{
              drawerIcon: ({ color, number, focused }) => {
                return (
                  <MaterialCommunityIcons name="gift" size={24} color="black" />
                );
              },
            }}
          />
          <Drawer.Screen
            name="About"
            component={AboutScreen}
            options={{
              drawerIcon: ({ color, number, focused }) => {
                return (
                  <MaterialCommunityIcons
                    name="information"
                    size={24}
                    color="black"
                  />
                );
              },
            }}
          />
          <Drawer.Screen
            name="Logout"
            component={HomePage}
            listeners={({ navigation }) => ({
              tabPress: (event) => {
                event.preventDefault();
                navigation.navigate("Home");
              },
            })}
            options={{
              drawerIcon: ({ color, number, focused }) => {
                return (
                  <MaterialCommunityIcons name="logout" size={24} color="black" />
                );
              },
            }}
          />
        </Drawer.Navigator>
      );
    }

监听器/onClick 不起作用，我也尝试添加这样的监听器：

    listeners={({ navigation }) => ({
        state: (e) => {
          if (e.data.state.index === 3) {
            // 3 is index of logout item in drawer
            // add logout code here
    
            // Close the drawer
            navigation.dispatch(DrawerActions.closeDrawer());
    
            // Navigate to "Home" and reset the navigation state
            navigation.dispatch(
              CommonActions.reset({
                index: 0,
                routes: [{ name: 'Home' }],
              })
            );
          }
        },

我也尝试过使用按钮，但由于某种原因不起作用。我不再有该代码了。
目前它只是加载 ，我可以打开抽屉/查看标题。

我的

Navigation

是嵌套的，

TabNavigation

位于当前最底部，然后是

TabNavigation

中每个元素的堆栈，对于

profile

，我有一个

StackNavigation

，里面有

DrawerNavigation

。理想的注销情况我想一路跳到

TabNavigation (HomeScreen)

我该如何处理这个问题？

Answer 1

使用自定义 drawerContent 添加注销项。

function CustomDrawerContent(props) {
  return (
    <DrawerContentScrollView {...props}>
      <DrawerItemList {...props} />
      <DrawerItem label="Logout" onPress={() => { /* TODO */ }} />
    </DrawerContentScrollView>
  );
}

...
<Drawer.Navigator
  drawerContent={(props) => <CustomDrawerContent {...props} />} >
...
</Drawer.Navigator>