Question

我创建了一个带有进度条的初始屏幕（进度条使用react-native-progress）。我的目标是在此初始屏幕中检查用户的可用性，并相应地重定向用户。我正在使用redux，因此创建了一个操作来检查是否有可用的登录令牌。

我用于登录检查的Redux操作：

export const loginCheck = (callback) => {

return async (dispatch) => {
    let token = await AsyncStorage.getItem(LOGIN_TOKEN);
    let userUid = await AsyncStorage.getItem(USER_UID);
    if(token && userUid) {
        dispatch({ type: VALID_LOGIN_AVAILABLE, payload: token });
        dispatch({ type: VALID_UID_AVAILABLE, payload: userUid });
        callback();
    }
    else {
        dispatch({ type: NO_VALID_LOGIN_AVAILABLE, payload: token });
    }
 }
};

因此，我在用户登录时将令牌和uid从firebase存储到异步。并在用户详细信息可用时使用回调。因此，在初始屏幕中，当我收到回调时，我将状态“ isUserAvailable”设置为true，否则默认设置为false。

我的目标是，等待进度条完成，然后如果isUserAvailable为true &&进度条=== 1，则重定向到Dashboard。其他用户将被重定向到“注册”屏幕。

我的进度栏操作代码：

export const progressBarLevel = () => {
return (dispatch) => {
    this.progress = 0;
    dispatch({ type: PROGRESS, payload: 0 });
    setTimeout(() => {
        this.indeterminate = false;
       const interval = setInterval(() => {
            this.progress += Math.random()/5;
            if(this.progress > 1){
                this.progress = 1;
                clearInterval(interval);
            }
            return dispatch({ type: PROGRESS, payload: this.progress });
        },250)
    },500)
  }
}

并使用道具获取此进度数据。因此，当达到1时，小节结束。当栏结束时，将执行登录检查并重定向。这是整个过程。

我的ComponentDidMount代码：

componentDidMount() {
    this.props.loginCheck(() => {
        this.setState({ isUserAvailble: true})
    })

   this.props.progressBarLevel();
}

我的componentDidUpdate代码：

 componentDidUpdate() {
   if(this.props.progressed === 1 && this.state.isUserAvailble === true) {
        this.props.navigation.navigate('Dashboard')
   }
   else {
        this.props.navigation.navigate('SignUpForm')
   }

}

现在发生的是，即使没有完成进度条，页面也被重定向到SignUpForm，如何使componentDidUpdate等待进度条完成？

请帮助

Answer 1

下面的代码可以解决您的问题。这里的假设是进度条结束时您拥有isUserAvailable。

componentDidUpdate() {
   if(this.props.progressed === 1) {
       if(this.state.isUserAvailble === true) {
        this.props.navigation.navigate('Dashboard')
       }
       else {
          this.props.navigation.navigate('SignUpForm')
       }
   }
}

再观察一次，您不应该通过回调设置State。您可以使用userId状态进行检查。

还有一点，您应该从登录操作中调度进度，并在完成对可用用户的检查后将其清除。这是一种更清洁的方法。

如何停止直到进度条在React Native中完成

1 个答案: