Задать начальный маршрут условно в реакции родного

Question

Я создаю мобильное приложение в React Native, процесс аутентификации которого похож на Whatsapp. Я хочу установить для initialRoute значение «Регистрация», если в AsyncStorage и dashboard, если токен присутствует, токена нет.Я пробовал это с помощью следующего кода, но он всегда указывает на 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 работает асинхронно, поэтому выражение, которое интерпретируется в вашем условии, является результирующим объектом Promise из функции getItem.

Вы можете попытаться использовать оператор await, чтобы заблокировать выполнение, пока не узнаете, есть ли токен. Это не рекомендуется, потому что вы будете блокировать инициализацию вашего приложения.

Вы также можете попытаться использовать маршрут по умолчанию, который будет проверять токен в componentDidMount, а затем перенаправлять на основе результата.

Примечание: AsyncStorage, импортированный из "react-native", теперь устарел и будет удален в следующем выпуске React-Native. Попробуйте вместо этого установить "@react-native-community/async-storage".

Answer 2

Asyncstorage.getItem () является асинхронным вызовом. Таким образом, вы должны использовать асинхронное ожидание.