登录导航问题后反应导航 [英] React Navigation after login navigate problem

问题描述

我在 React Navigation 中使用 useNavigation.使用AsyncStorage登录后，我想重定向到首页，但无法返回到App功能.当我想转到主页时，导航找不到并返回错误.

I'm using useNavigation in React Navigation. After logging in with AsyncStorage, I want to redirect to the home page, but I cannot go back to the App function. When I want to go to HomePage, Navigate cannot find it and returns an error.

如何触发名为 app 的函数?

导航错误(控制台)

有效载荷为 {name":HomeScreen"} 的操作NAVIGATE"不是由任何导航员处理

The action 'NAVIGATE' with payload {"name":"HomeScreen"} was not handled by any navigator

登录代码

await AsyncStorage.setItem("userData", JSON.stringify(data.data));
navigation.navigate('HomeScreen');

App.js

const App = () => {
  const [signedIn, setSignedIn] = useState([]);

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

  async function _checkUser(){
    let responseUser = await AsyncStorage.getItem("userData");
    setSignedIn(responseUser);
  }

  if(signedIn != null) {
    return (
      <NavigationContainer>
      <Stack.Navigator screenOptions={{headerShown: false}}>
        <Stack.Screen name="HomeScreen" component={_homeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
    )
  } else {
    return (
      <NavigationContainer>
        <Stack.Navigator screenOptions={{headerShown: false}}>
          <Stack.Screen name="WelcomeScreen" component={_welcomeScreen} />
          <Stack.Screen name="RegisterScreen" component={_registerScreen} />
          <Stack.Screen name="LoginScreen" component={_loginScreen} />
          <Stack.Screen name="ForgotScreen" component={_forgotScreen} />
          <Stack.Screen name="EmailCodeScreen" component={_emailCodeScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    )
  }
}

当我尝试用 MOBX 做这件事时..

When I try to do it with MOBX..

let signedIn = userStore.isLogin;

  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{headerShown: false}}>
        {
          signedIn ? (
            <Stack.Screen name="HomeScreen" component={_homeScreen} />
          ) : (
            <>
              <Stack.Screen name="WelcomeScreen" component={_welcomeScreen} />
              <Stack.Screen name="RegisterScreen" component={_registerScreen} />
              <Stack.Screen name="LoginScreen" component={_loginScreen} />
              <Stack.Screen name="ForgotScreen" component={_forgotScreen} />
              <Stack.Screen name="EmailCodeScreen" component={_emailCodeScreen} />
            </>
          )
        }
      </Stack.Navigator>
    </NavigationContainer>
  )

路由器

let data = await axios.post(baseURL+"users_checkMail", sendData);
uaStore.userStore.userData = data.data;
uaStore.userStore.isLogin = true;
await AsyncStorage.setItem("userData", JSON.stringify(data.data));
console.log(userStore.isLogin); // LOG: TRUE
setLoader(false);
navigation.navigate('HomeScreen');

推荐答案

如果您使用 mobx 进行状态管理，请在您的 mobx 状态树中创建和管理 signedIn 状态.当用户登录时，您只需将signedIn 状态设置为true.当用户注销时，将signedIn 设置为false.无需使用导航道具.当你改变你的 signedIn 状态时，react-navigation 组件将重新渲染.

If you are using mobx for state management, create and manage signedIn state in your mobx state tree. when user logs in , you just have to set signedIn state to true. When user logs out, set signedIn to false. No need to use navigation props. When you change your signedIn state, react-navigation component will rerender.

这篇关于登录导航问题后反应导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！