如何在 React-Navigation V5 中动态显示抽屉项目？

Question

我在尝试在 React-Navigation 抽屉中动态显示不同项目时遇到了一些麻烦。

如果用户登录与否，我有一个抽屉需要显示不同的项目。在这种情况下，如果用户已登录，则不应显示“RegisterScreen”和“LoginScreen”按钮，而应显示“Log Out”按钮。但是，如果用户未登录，则注册和登录屏幕都应显示，而注销按钮不应显示。

我已经使用下面的代码成功显示了按钮（除了注销按钮，我还没有这样做）。但是，一旦用户注销，应用程序会将他们重定向到登录屏幕。由于我没有在抽屉中声明它们，因此出现以下错误：

console.error: The action 'NAVIGATE' with payload {"name":"LoginModal"} was not handled by any navigator.

我明白没有添加屏幕，但我不知道如何在用户登录时隐藏它们。

代码：

//Added DrawerItemList for the Logout button.
  const CustomDrawerContent = (props) => {
    return (
      <DrawerContentScrollView {...props}>

        <DrawerItemList {...props} />
        <DrawerItem
          label="Logout"
          onPress={async () => {
            props.navigation.closeDrawer();
            await LogOut().then((result) => {
              props.navigation.navigate('LoginModal');
            });
          }}
        />

      </DrawerContentScrollView>
    );
  };

  const [drawerCategories, setDrawerCategories] = useState([]);

//Checks if the user is logged in and sets Login and Register screens in the state.
  useEffect(() => {
    let mounted = true;
    if (mounted) {
      AsyncStorage.getItem('userId').then((result) => {
        console.log(result);
        if (result == null) {
          setDrawerCategories([
            ...drawerCategories,
            {name: 'LoginModal', component: {LoginScreen}},
            {name: 'RegisterModal', component: {RegisterScreen}},
          ]);
        }
      });
    }
    return () => (mounted = false);
  }, []);

  return (
    <NavigationContainer>
      <RootDrawer.Navigator
        drawerType="front"
        initialRouteName="Home"
        mode="modal"
        drawerContent={(props) => <CustomDrawerContent {...props} />}>
        <RootDrawer.Screen name="Home" component={MainStackScreen} />

//Add the Register and Login buttons here
        {drawerCategories.map((drawer) => {
          <RootDrawer.Screen name={drawer.name} component={drawer.component} />;
        })}

      </RootDrawer.Navigator>
    </NavigationContainer>
  );

你能帮我弄清楚如何解决这个错误吗？非常感谢！

Answer 1

不确定您的 LogOut 函数是做什么的，但除非它实际重新运行效果以便定义您的 LoginModal 屏幕，否则将不会有一个名为 LoginModal 的屏幕可供导航。

查看您的代码，您的效果不会在您注销后重新运行。与其在效果中设置屏幕列表，不如将代码安排成如下所示：

1. 全球存储，如 Redux、React Context 或任何您喜欢存储 userId
2. useEffect 钩子应该恢复尝试从AsyncStorage 恢复userId，就像你现在正在做的那样，但是在恢复之后，它应该更新你的全局存储以更新那里的userId 而不是设置屏幕
3. 您的logOut 函数应从AsyncStorage 中删除userId，并更新全局存储以使其成为null。
4. 在您的组件中，您应该根据userId 是否为null 有条件地定义屏幕，并且它们会在登录或注销时自动更改

身份验证流程文档展示了如何使用令牌和堆栈导航器进行此操作的示例：https://reactnavigation.org/docs/auth-flow/

您可以对用户 ID 和抽屉导航器使用类似的策略。