React Native 导航 v6 身份验证流程

Question

我有一个应用程序，我可以在其中登录/注册并可以注销/注销，我正在使用react navigation v6相同的应用程序，并且我可以登录，但是当我注销时，它不会立即将我注销，我会到hot restart应用程序，然后我已经注销了，它只是在没有热重启的情况下不会注销我，而且，在注销时，我收到错误/警告：

error:

The action 'NAVIGATE' with payload {"name":"Login"} was not handled by any navigator.
Do you have a screen named 'Login'?
If you're trying to navigate to a screen in a nested navigator, see https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator.
This is a development-only warning and won't be shown in production.

下面是我正在使用的代码：

上下文文件：

The action 'NAVIGATE' with payload {"name":"Login"} was not handled by any navigator.
Do you have a screen named 'Login'?
If you're trying to navigate to a screen in a nested navigator, see https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator.
This is a development-only warning and won't be shown in production.

导航屏幕：

const initialState = {
  user: null,
  loading: false,
};

const UserContext = createContext(initialState);

export const UserProvider = ({children}) => {
  const [globalState, dispatch] = useReducer(UserReducer, initialState);

  return (
    <UserContext.Provider value={{
      user: globalState.user,
      loading: globalState.loading,
      dispatch,
    }} >
      {children}
    </UserContext.Provider>
  );
};

export default function() {
  return useContext(UserContext);
}

checkUserLoggedInStatus，login＆logout实用功能：

const Navigation = () => {
  const {user, dispatch, loading} = useAuth();
  let navigationRef;

  useEffect(() => {
    setTimeout(() => {
      navigationRef = createNavigationContainerRef(); // To avoid getting error: navigator is undefined while the component is mounting...
    }, 500);
    checkUserLoggedInStatus(dispatch, navigationRef);
  }, [dispatch]);

  return loading ? (
    <LoadingScreen />
  ) : (
    <Stack.Navigator screenOptions={{headerShown: false}}>
      {!user ? (
        <Stack.Group>
          <Stack.Screen name="Login" component={LoginScreen} />
          <Stack.Screen name="Register" component={RegisterScreen} />
        </Stack.Group>
      ) : (
        <Stack.Group>
          <Stack.Screen name="Home" component={HomeScreen} />
          <Stack.Screen name="Settings" component={SettingsScreen} />
        </Stack.Group>
      )}
    </Stack.Navigator>
  );
};

正如您所看到的错误（前几行代码），我无法从我的应用程序正确导航/注销。任何帮助将非常感激！

Answer 1

从外观上看，您的注销操作中有两件事需要调整。

1. 您正在从 AsyncStorage 中删除令牌，但您的useAuth钩子中仍然设置了一个用户对象，这就是有条件地呈现包含登录/注册的堆栈组或具有 home/settings 的堆栈组的对象：

{!user ? (
        <Stack.Group>
          <Stack.Screen name="Login" component={LoginScreen} />
          <Stack.Screen name="Register" component={RegisterScreen} />
        </Stack.Group>
      ) : (
        <Stack.Group>
          <Stack.Screen name="Home" component={HomeScreen} />
          <Stack.Screen name="Settings" component={SettingsScreen} />
        </Stack.Group>
      )}

所以用户不是假的，并且仍然会渲染主页/设置，因此您不会导航回登录。调度一个操作将其设置回 null，您将自动导航回登录。

2. 使用react-navigation时使用的典型注销流程意味着，当您执行注销操作时，您实际上不需要执行此操作，navigator.navigate('Login')因为该堆栈的默认路由将返回到登录（只需在导航器中设置它） ），因为由于我上面提到的第一点，屏幕当前尚未渲染（有条件地渲染它们，屏幕在您导航的位置实际上不存在），因此您可以安全地删除此行。