Asyncstorage в App.js для входа в систему в соответствии с сохраненным значением

Question

Это моя реализация в app.js, где я пытаюсь условно установить начальный экран на основе значения, если пользователь вошел в систему или нет.

Но метод вызывается до того, как значение возвращается изAsyncStorage.

import React, { Component } from 'react';
import { AsyncStorage } from 'react-native';
import Login from './screens/Login';
import Home from './screens/Home';
import { AppInit } from './utils/AppInit';

export default AppInit({
  initScreen: AsyncStorage.getItem("UserDetailsStored").then((value) => { console.log("stored value ", value); value == "false" ? "Login" : "Home" }),
  screens: {
    Login,
    Home,
    Screen1,
    Screen2,
    Profile
  }
});

Код AppInit, используя react-native-router-flux

const AppInit = (screen) => {
    return App = () => {
        return (
            <Provider store={store}>
                <PersistGate loading={null} persistor={persistor}>
                    <NetworkProvider>
                        <Router>
                            <Stack key="root">
                                {_.map(screen.screens, (name, key) => {
                                    return <Scene initial={key == screen.initScreen ? true : false} hideNavBar key={key} component={name} />
                                })}
                            </Stack>
                        </Router>
                    </NetworkProvider>
                </PersistGate>
            </Provider>
        )
    }
}

Я пробовал изменить файл app.js, но он тоже не работает.Спасибо

Answer 1

Я бы предложил использовать один дополнительный экран для проверки входа в систему.

Проверьте значение asyncStorage там. Потому что AsyncStorage требует времени для получения данных.

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

Смотрите, используйте этот экран в качестве первого экрана для загрузки в приложение.

скажем, у нас есть SyncScreen.

import React, { Component } from 'react'
import { Text, View, AsyncStorage } from 'react-native'

export default class SyncScreen extends Component {
  componentWillMount=()=>{
 AsyncStorage.getItem("UserDetailsStored")
 .then((value) => { 
    if(value){
      // navigate to somewhere.....
    }
    else{
      // navigate to login..
    }
  }
),
}
  render() {
    return (
      <View>
        <Text> Wait a minute</Text>
      </View>
    )
  }
}