React native 反应导航5验证流

在我的

React Native

应用程序中，我正在使用

React Navigation 5

并尝试将用户路由到身份验证堆栈，如果用户未经身份验证，即

异步存储中没有
访问令牌

我所困惑的是如何从
AsyncStorage
获取令牌，因为这是一个异步过程。我似乎无法
等待
我的
应用程序中的调用
组件，也就是说，如果我尝试，它会给我一个错误，如果我不
等待
它，那么我会得到一个
承诺

如何使用
React导航5
实现此功能

这是我的
应用程序
组件：

const App = () => {

  const authenticatedUser = AsyncStorage.getItem("access_token");
  return (
    <Provider store={store}>
      <NavigationContainer>
        {
          authenticatedUser !== null || typeof authenticatedUser !== "undefined"
          ? <RootNavigator />
          : <AuthNavigator />
        }
      </NavigationContainer>
    </Provider>
  );
};

export default App;

const-App=（）=>{
const authenticatedUser=AsyncStorage.getItem（“访问令牌”）；
返回(
{
authenticatedUser！==null | | authenticatedUser的类型！==“未定义”
? 
: 
}
);
};
导出默认应用程序；
我建议您使用一些加载器。从异步存储加载数据检查令牌是否有效，如果无效则刷新，加载用户配置文件并在初始化人员中执行更多操作。在代码中，您可以这样做

let Loader=()=>{
const [loadingData, setLoading]= useState(null);
let effect=async ()=>{
    let credentials = await AsyncStorage.getItem(“data”)
    setLoading(credentials||{})
}
useEffect(()=>effect())
If (loadingData===null)
     return <LoadingView/>
return <YourRouter {...{loadingData}}/>

let Loader=（）=>{
const[loadingData，setLoading]=useState（null）；
let effect=async（）=>{
让凭证=等待AsyncStorage.getItem（“数据”）
设置加载（凭证| |{}）
}
useffect（（）=>effect（））
如果（加载数据===null）
回来
回来
您必须等待从异步存储中获得这样的令牌

const App = () => {

const [loading, setLoading] = usState(true)
const [authenticated, setAuthenticated] = usState(false)

useEffect(()=>{async()=>{
  const authenticatedUser = await AsyncStorage.getItem("access_token");
  setLoading(false)
  if(authenticatedUser !== null) setAuthenticated(true)
 }},[])

  return (
    <Provider store={store}>
      <NavigationContainer>
        { loading &&
         <ActivityIndictor size='small' />
        }
        {
          authenticated && !loading
          ? <RootNavigator />
          : <AuthNavigator />
        }
      </NavigationContainer>
    </Provider>
  );
};

export default App;

const-App=（）=>{
常量[loading，setLoading]=usState（真）
const[authenticated，setAuthenticated]=usState（false）
useffect（（）=>{async（）=>{
const authenticatedUser=wait AsyncStorage.getItem（“访问令牌”）；
设置加载（错误）
if（authenticatedUser！==null）setAuthenticated（true）
}},[])
返回(
{加载&&
}
{
已验证加载&
? 
: 
}
);
};
导出默认应用程序；
您是否尝试过挂钩和异步回调来获取令牌以及一些加载状态的组合？谢谢！这很好，但我有一个问题。因为我们使用的是
useffect（）
，此函数将在每次组件装载/更新时调用。我担心，因为
异步存储
操作是
异步的
，这不会对应用程序的性能产生负面影响吗？实际上，此函数将像componentDidMount一样工作，不会像您在Useffect I am pa中看到的那样调用每次更新将数组作为参数使用意味着它将在每次更新时呈现。我还将编辑此答案并将异步操作移到其他地方，因为在钩子回调中处理异步函数不是推荐的方法。