登录react-native后如何将仪表板设置为第一个屏幕 [英] How to set dashboard as first screen after login in react-native

问题描述

我使用的是 react-native，我的第一个屏幕是欢迎屏幕，我想在用户登录时在我的第一个屏幕上设置仪表板.

I am using react-native where my first screen is Welcome screen and I want to set dashboard on my first screen when the user is login.

这是我的代码:

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 秒.

I set this code on the Welcome screen and its working fine in IOS. But in android issue is it shows the Welcome screen for 5 to 10 seconds before going to dashboard screen when the user is login.

这里我使用 react-native-router-flux 作为导航栏.

Here I am using react-native-router-flux for the navigation bar.

推荐答案

因为 AsyncStorage.getItem() 是异步的，你的 render() 函数在它之前被调用已完成.

Because AsyncStorage.getItem() is asynchronous, your render() function is being called BEFORE it has been fulfilled.

所以你的应用程序的流程是:

So the flow of your application is:

1. 调用componentWillMount()
2. AsyncStorage.getItem()
3. render() - 这是您看到欢迎屏幕 5-10 秒的地方
4. AsyncStorage 已完成 - .then() 然后用户被重定向到仪表板.

1. Call componentWillMount()
2. AsyncStorage.getItem()
3. render() - This is where you see your Welcome Screen for 5-10 seconds
4. AsyncStorage has been fulfilled - .then() and then the User gets redirected to the dashboard.

我会在你的州设置一个 isLoaded 标志:

I would set an isLoaded flag in your state:

constructor() {
  super();
  this.state = {
    isLoaded: false,
  }
}

然后在您的 componentWillMount() 函数内部，一旦 AsyncStorage 履行其承诺，将值设置为 true.

Then inside of your componentWillMount() function, set the value to true once AsyncStorage has fulfilled its Promise.

try {
  var userDetail =   JSON.parse(json);
  if(userDetail.isLoggedIn != undefined && userDetail.isLoggedIn == true){
    Actions.dashboard();
  }
  this.setState({ isLoaded: true });
}

最后，我会在 render() 内添加某种加载指示器，以向用户显示您的应用程序仍在执行某些逻辑.

And finally, I would add some sort of loading indicator inside of render() to show the User that your application is still performing some logic.

render() {如果(this.state.isLoading){return <Text>我正在加载</Text>} 别的 {返回 ...}}

这篇关于登录react-native后如何将仪表板设置为第一个屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！