3

我有一个已放入堆栈的登录屏幕。用户成功登录后，他被重定向到主屏幕，这是一个抽屉屏幕。抽屉屏幕的选项之一是注销，因此单击它的用户应该注销。以下是我的注销屏幕代码。我只是在 ui 的注销屏幕中显示进度条，但在useEffect挂钩中，我正在调用以下代码

navigation.reset({
   routes: [{name: LOGIN_SCREEN}],
});

我也尝试调用上述方法，useLayoutEffect但注销按钮只是挂起。

我的导航堆栈如下所示

<Stack.Navigator>
    <Stack.Screen
      name={LOGIN_SCREEN}
      component={LoginScreen}
      options={{headerShown: false}}
    />
    <Stack.Screen
      name={HOME_STACK_SCREEN}
      component={DrawerStack}
      options={{headerShown: false}}
    />

    // ...

</Stack.Navigator>

我的抽屉组件如下

<Drawer.Navigator
  drawerStyle={{backgroundColor: BLUE_COLOR_1}}
  drawerContentOptions={{labelStyle: {color: '#FFF'}}}
>
    <Drawer.Screen
      name={HOME_SCREEN}
      component={Home}
      options={{
        // ...
      }}
    />
    <Drawer.Screen
      name={LOGOUT_SCREEN}
      component={Logout}
      options={{
       // ...
      }}
    />

    // ...

</Drawer.Navigator>

以下是我的注销组件

const Logout = ({navigation}) => {
    async function logout() {
        try {
            await AsyncStorage.clear();
            navigation.reset({
                index: 0,
                routes: [{name: LOGIN_SCREEN}],
            });
        } catch (e) {
            Alert.alert(e.toString());
            console.log(e.toString());
        }
    }

    useEffect(() => {
         logout();
    }, []);

    return <ProgressBar />;
};
4

2 回答 2

0

我看到了你的代码，老实说，如果我们想到身份验证流程，这对我来说并不好看，这就是我这么说的原因。请逐步检查此链接，您将了解如何以适当的方式简单地实现此身份验证流程。React Navigation Auth Flow，当我们尝试从 android 后退按钮导航屏幕时，就会出现这个问题，user can go back to login after you navigate user to home page on success login

其次，您可以在当前代码中尝试一种条件。

在屏幕中调用注销功能之前，您需要检查一个条件

useEffect(()=>{
 if(check if user value if still there in async storage ) {
 **Here you can excute you code for log out **
 }
}

而不是使用导航中的重置操作使用popToTop，在这里你可以找到参考你如何使用PopToTop或使用这个

navigation.popToTop()

干杯！！

于 2020-03-06T07:26:55.423 回答
0

Invariant Violation: Maximum update depth exceeded using react Navigation v5当某事进入无限循环时发生

navigation.reset({
    routes: [{name: LOGIN_SCREEN}],
});

当您说将上面的代码放入时useEffect，我怀疑钩子被多次调用。

于 2020-03-02T05:22:38.090 回答