如何在 React Native 中卸载组件答案

【问题标题】：How to unmount the component in React Naitve如何在 React Native 中卸载组件
【发布时间】：2019-02-18 10:12:50
【问题描述】：

我创建了一个带有进度条的启动画面。启动屏幕的整个功能是检查用户是否可用，如果是，它将重定向到仪表板否则注册表单。我正在使用 redux 操作来计算进度条值和登录检查。

这是我的进度条操作代码：

export const progressBarLevel = () => {
return (dispatch) => {
    this.progress = 0;
    dispatch({ type: PROGRESS, payload: 0 });
    setTimeout(() => {
        dispatch({ type: INDETERMINATE, payload: 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)
  }
}

还有我的登录检查操作：

export const loginCheck = () => {
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 });
    }
    else {
        dispatch({ type: NO_VALID_LOGIN_AVAILABLE, payload: token });
    }
  }
};

因此，通过使用这些，我可以满足需求。我正在使用 componentDidMount 和 willUpdate 来执行操作。

我的组件DidMount()：

componentDidMount() {
   this.props.loginCheck();
   this.props.progressBarLevel();
}

我的 componentDidUpdate():

componentDidUpdate() {
this.mounted = true;
    if(this.props.progressed === 1) {
        if(this.props.token === null) {
            this.props.navigation.navigate('WelcomeAuth')
        }
        else {
            this.props.navigation.navigate('Dashboard')
        }
    }

}。

所以，总的来说一切正常，但是当没有用户可用时。页面被重定向到“WelcomeAuth”（实际上是正确的）但是，当我输入一些内容时，它再次重定向到“页面开头”，作为欢迎页面。那么，我应该点击注册按钮并输入下一个单词，然后再次返回欢迎页面。

如何停止闪屏组件？由于它的工作是重定向它，重定向之后，启动屏幕应该被卸载，这样它就不会在后台工作？

如何做到这一点？

【问题讨论】：

标签： javascript reactjs react-native

【解决方案1】：

首先创建一个动作来重置导航状态

const homeAction = StackActions.reset({
    index: 0,
    actions: [NavigationActions.navigate({ routeName: 'HomeScreen' })],
});

然后使用 dispatch 导航

this.props.navigation.dispatch(homeAction);

这里所有其他组件都将被删除，只有 HomeScreen 会在导航堆栈中

【讨论】：