在 React Native 中有条件地设置初始路由

Question

我正在 React Native 中构建一个移动应用程序，其身份验证过程类似于 Whatsapp。如果

initialRoute

中没有令牌，我想将

AsyncStorage

设置为“注册”，如果存在令牌，则将

dashboard

设置为“注册”。I使用以下代码尝试了此操作，但它总是指向

dashboard

，即使

AsyncStorage

中没有令牌。

抽屉

import { AsyncStorage } from 'react-native'
import Signup from '../screens/SignupScreen'
import CustomDrawer from './CustomDrawer'

const DrawNavigator = createDrawerNavigator({
  Dashboard: { screen: Home },
  Signup: { screen: Signup},
  },{
  initialRouteName: AsyncStorage.getItem('token') ? 'Dashboard' : 'Signup',
contentComponent: CustomDrawer,
drawerOpenRoute: 'drawerOpen',
drawerCloseRoute: 'drawerClose',
drawerToggleRoute: 'drawerToggle'});

export default DrawNavigator;

编辑

async function checkToken(){
  var token = await AsyncStorage.getItem('token')
  return token ? true : false
}

initialRouteName: checkToken()  ? 'Dashboard' : 'Signup',

但是即使没有存储令牌，应用程序仍然可以访问

Dashboard

Answer 1

AsyncStorage 异步工作，因此在条件中解释的表达式是 getItem 函数生成的 Promise 对象。

您可以尝试使用

await

语句来阻止执行，直到知道是否有令牌为止。不建议这样做，因为您将阻止应用程序的初始化。

您还可以尝试使用默认路由来检查 componentDidMount 中的令牌，然后根据结果进行重定向。

旁注： 从

"react-native"

导入的 AsyncStorage 现已弃用，并将在 React-Native 的未来版本中删除。考虑安装

"@react-native-community/async-storage"

。

Answer 2

Asyncstorage.getItem() 是异步调用。所以你必须使用异步等待。

Answer 3

如果你直接调用异步函数，那么这将始终返回意味着 true 的承诺。这就是为什么你总是得到 true 条件。