Как установить панель мониторинга в качестве первого экрана после входа в интерактивный
Я использую response-native, где мой первый экран - экран приветствия, и я хочу установить панель мониторинга на моем первом экране, когда пользователь является логином.
Вот мой код:
componentWillMount(){
var self = this;
AsyncStorage.getItem(AppStrings.contracts.IS_LOGGED_IN).then((json) =>{
try{
var userDetail = JSON.parse(json);
if(userDetail.isLoggedIn != undefined && userDetail.isLoggedIn == true){
Actions.dashboard();
}
}catch(e){
}
})
}
Я установил этот код на экране приветствия и отлично работал в IOS. Но в проблеме Android это показывает экран приветствия в течение 5-10 секунд, прежде чем перейти на экран панели управления, когда пользователь входит в систему.
Здесь я использую action-native-router-flux для панели навигации.
Поскольку AsyncStorage.getItem() является асинхронным, функция render() вызывается до того, как она была выполнена.
Таким образом, поток вашего приложения:
ВызовитеcomponentWillMount() AsyncStorage.getItem() render() - здесь вы видите ваш экран приветствия в течение 5-10 секунд Выполнен AsyncStorage - .then() а затем Пользователь перенаправляется на панель управления. Я бы установил флаг isLoaded в вашем состоянии:
constructor() {
super();
this.state = {
isLoaded: false,
}
}
Затем внутри вашей функции componentWillMount() установите значение true только AsyncStorage выполнит свое обещание.
try {
var userDetail = JSON.parse(json);
if(userDetail.isLoggedIn != undefined && userDetail.isLoggedIn == true){
Actions.dashboard();
}
this.setState({ isLoaded: true });
}
И, наконец, я бы добавил какой-то индикатор загрузки внутри render() чтобы показать пользователю, что ваше приложение все еще выполняет некоторую логику.
render() { if(this.state.isLoading) { return <Text>I am loading</Text> } else { return... } }
