如何在react-native中登录后将仪表板设置为第一个屏幕

Question

我正在使用react-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秒。

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

Answer 1

由于AsyncStorage.getItem()是异步的，因此在render()函数完成之前就会调用它。

所以你的申请流程是：

1. 致电componentWillMount()
2. AsyncStorage.getItem()
3. render() - 您可以在此处看到欢迎屏幕5-10秒
4. AsyncStorage已经完成 - .then()，然后用户被重定向到仪表板。

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

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

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

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