Question

我一直在研究React本机应用程序。该应用程序包含入职和其他屏幕。如果用户第一次打开应用程序，我想显示入职屏幕，如果不是这种情况，则必须受到登录屏幕的欢迎

const LoadNavigation = () => {
  const { isFirst } = useIsFirstLaunch();

  return isFirst === null ? (
    <AppLoading />
  ) : (
    <AppStack.Navigator headerMode="none">
      {isFirst ? (
        <AppStack.Screen name="Onboarding" component={Onboarding} />
      ) : (
        <AppStack.Screen
          name="Authentication"
          component={AuthenticationNavigator}
        />
      )}
    </AppStack.Navigator>
  );
};

export default LoadNavigation;

export const AuthenticationNavigator = () => {
  return (
    <AuthenticationStack.Navigator headerMode="none">
      <AuthenticationStack.Screen name="Login" component={Login} />
    </AuthenticationStack.Navigator>
  );
};

这可行，但是当我尝试从入职屏幕导航到登录屏幕时，出现错误。

navigation.navigate("Authentication",{screen:"Login"})

我也不想在用户第一次打开应用程序时按android上的“后退”按钮从登录屏幕返回到入职屏幕（必须退出应用程序）

这样的错误

“具有有效负载{“ name”：“ Authentication”，“ params”：{“ screen”：“ Login”}}的动作'NAVIGATE'未被任何导航器处理。”

编辑：我也在isFirst条件中添加了AuthenticationNavigator。但是这次，如果“ isFirst”是true还是false，它也会向我显示登录页面

 return (
    <AppStack.Navigator headerMode="none">
      {isFirst ? (
        <>
          <AppStack.Screen name="Onboarding" component={Onboarding} />
          <AppStack.Screen
            name="Authentication"
            component={AuthenticationNavigator}
          />
        </>
      ) : (
        <>
          <AppStack.Screen
            name="Authentication"
            component={AuthenticationNavigator}
          />
        </>
      )}
    </AppStack.Navigator>
  );
};

Answer 1

这就是我的做法：

export default function App() {
  const [completedOnboarding, setCompletedOnboarding] = useState(true);
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const isFirstTime = async () => {
    try {
      const value = await AsyncStorage.getItem('first_time');
      if (value === null || value === 'true') {
        setCompletedOnboarding(false);
      } else if (value === 'false') {
        setCompletedOnboarding(true);
      }
    } catch (error) {
      console.log({error});
    }
  };

  const onDone = async () => {
    try {
      await AsyncStorage.setItem('first_time', 'false');
      setCompletedOnboarding(true);
    } catch (error) {}
  };

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

  return (
    <>
      {!completedOnboarding ? (
        <OnBoarding onDone={onDone} />
      ) : (
        <NavigationContainer>
          <Stack.Navigator screenOptions={{headerShown: false}}>
            {!isLoggedIn ? (
              <Stack.Screen
                name="Auth"
                component={Auth}
              />
            ) : (
              <Stack.Screen name="Home" component={Home} />
            )}
          </Stack.Navigator>
        </NavigationContainer>
      )}
    </>
  );
}

Answer 2

在安装您的入职屏幕时，由于条件渲染，登录名在导航器层次结构中不存在。因此，您无法以编程方式从“入职”屏幕中导航，并且会引发此错误。

为了解决这个问题，您应该按照文档here中的说明专门使用条件路由。您应该使用效果来设置此初始状态，具体取决于用户是否已登录/注销，是否需要入职等。这取决于您的身份验证/本地状态管理设置。

编辑：这也应该解决Android上的后退按钮，因为如果正确设置效果或类似效果，则条件路由应消除堆栈中以前的所有屏幕。

在React Native中在不同屏幕之间导航

2 个答案: