时间戳

首页 > 解决方案 > React Native 中不同屏幕之间的导航

react-native - React Native 中不同屏幕之间的导航

问题描述

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

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”是真还是假，它也会向我显示登录页面

 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>
  );
};

标签： react-nativereact-navigation

解决方案

我就是这样做的：

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>
      )}
    </>
  );
}

推荐阅读