NativeStackNavigator React Native - 身份验证

Question

我为我的应用程序制作了一个登录屏幕和一个主页。我的目标是存储用户是否已登录，如果已登录，则不通过登录页面发送给他，而是直接发送到主页。我在网上找到了一种方法，使用代码中显示的这种方法。但即使该功能有效（它正确记录“已登录”或“未登录”。它仍然总是直接将我发送到主页...我做错了什么？

import React from "react";
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import HomeScreen from "../screens/HomeScreen";
import Login from "../screens/Login";
import * as SecureStore from 'expo-secure-store';

const AuthStack = () => {
  const AuthStack = createNativeStackNavigator();

  async function isLoggedIn(key) {
    let result = await SecureStore.getItemAsync(key);
    if (result !== null) {
      alert(" Here's your value  \n" + result);
      console.log("logged in");
      return true;
    }
    else {
      alert('No values stored under that key.');
      console.log("not logged in");
      return false;
    }
  }

  return (
    <AuthStack.Navigator>
        {
          isLoggedIn("access_token") ? (
              <>
                <AuthStack.Screen name = "HomeScreen" component={HomeScreen}/>
              </>
            ) : (
              <>
                <AuthStack.Screen
                    name = "Login"
                    component={Login}
                    options={{
                      title: 'Log In',
                      headerStyle: {
                        backgroundColor: '#212521'
                      },
                      headerTintColor: '#fff',
                      headerTitleStyle: {
                        fontWeight: 'bold',
                      },
                    }}
                />

              </>
            )
        }
    </AuthStack.Navigator>
  );
};

export default AuthStack;

Answer 1

您的函数是异步的，因此在第一次呈现时它不会加载信息来决定是否应该呈现 HomeScreen 或 LoginScreen。您需要获取数据，return 在加载数据之前什么都不做，然后触发将导致重新渲染的状态更改。

这可以按如下方式实现。


const [isSignedIn, setSignedIn] = useState()

React.useEffect(() => {
   const loggedIn = async () => { 
     const t = await SecureStore.getItemAsync(key)
     setSignedIn(t !== null ? true : false)
   }
   loggedIn()
}, [])

// maybe show a loading indicator
if (isSignedIn === undefined) {
   return null
}

  return (
    <AuthStack.Navigator>
        {
          isSignedIn? (
              <>
                <AuthStack.Screen name = "HomeScreen" component={HomeScreen}/>
              </>
            ) : (
              <>
                <AuthStack.Screen
                    name = "Login"
                    component={Login}
                    options={{
                      title: 'Log In',
                      headerStyle: {
                        backgroundColor: '#212521'
                      },
                      headerTintColor: '#fff',
                      headerTitleStyle: {
                        fontWeight: 'bold',
                      },
                    }}
                />

              </>
            )
        }
    </AuthStack.Navigator>
  );

NativeStackNavigator React Native - 身份验证

NativeStackNavigator React Native - Authentication

javascript

react-router

react-native