Question

我正在尝试在我的 React Native 应用程序中实现一个简单的身份验证流程，在该流程中，一旦用户登录，他将无法返回登录屏幕。但不幸的是，我似乎无法让它发挥作用。我为我的签名状态创建了两个不同的导航器，但是一旦我登录并进入我的主页，当我返回时，我仍然可以转到我不想要的登录屏幕。我哪里错了？任何帮助，将不胜感激。谢谢。

AppNavigator.js

const AppNavigator=()=>{
  const [isSignedIn, setisSignedIn] = useState(false);
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    let mounted=true;
    if(mounted){
        initializeApp();
    }
    return () => {
        mounted=false;
    }
  }, [])
  function initializeApp(){
    const subscriber = auth().onAuthStateChanged((user)=>{
        if(user){
          setisSignedIn(true);
          
        }else{
          setisSignedIn(false);
        }
        setLoading(false);
}
if(loading){
  return(
    <Stack.Navigator   screenOptions={{
      headerShown: false
    }}>  
      <Stack.Screen name="SplashScreen" component={SplashScreen}></Stack.Screen>
    </Stack.Navigator>
  )
}
if(!isSignedIn){
  return(
    <Stack.Navigator   screenOptions={{
      headerShown: false
    }}>  
      <Stack.Screen name="LoginForm" component={LoginForm}></Stack.Screen>
      <Stack.Screen name="OTPScreen" component={OTPScreen}></Stack.Screen>
    </Stack.Navigator>
  )
}else{
    return(
      <Stack.Navigator   screenOptions={{
        headerShown: false
      }}>  
      <Stack.Screen name="HomePage" component={HomePage}></Stack.Screen>
    </Stack.Navigator>

  )
}
}

Answer 1

我正在使用片段来包装导航：

import { NavigationContainer } from "@react-navigation/native";

return (
  <>
    {loading ? <SplashScreen /> : null}
    {isSignedIn ? (
     <NavigationContainer>
       <Stack.Navigator
         screenOptions={{
           headerShown: false,
         }}
       >
         <Stack.Screen name="HomePage" component={HomePage}></Stack.Screen>
       </Stack.Navigator>
     <NavigationContainer/>
    ) : (
     <NavigationContainer>
       <Stack.Navigator
         screenOptions={{
           headerShown: false,
         }}
       >
         <Stack.Screen name="LoginForm" component={LoginForm}></Stack.Screen>
         <Stack.Screen name="OTPScreen" component={OTPScreen}></Stack.Screen>
       </Stack.Navigator>
     <NavigationContainer/>
    )}
  </>
);

反应导航 5 身份验证流程不起作用

1 个答案: