React Native中RefreshControl刷新动画不消失的问题

最近在RN项目迭代中遇到了一个问题，个人中心有个下拉刷新的功能，但是有些时候会发现刷新了之后，refreshCtrol的加载的小菊花会悬停在上方，不停的在转。

后来经过多方测试，确定了这种现象出现的情况，只会在release的包中出现，不会再debug的包中出现，出现的情况是时有时无。

说实话，是个挺头疼的问题，因为只在release中出现，所以就不能打断点，也不能console.log，只能想办法在release包中加上toast来进行调试，经过多次调试，发现有的时候，菊花开始转了，但是请求接口的方法并没有进行，代码如下(为了方便，省去了很多判断的代码)

                <ScrollView refreshControl={
                    <RefreshControl
                        refreshing={this.props.refreshing}
                        onRefresh={this._loadData}
                        colors={["tomato"]}
                    />}}
                >
                ......
                </ScrollView>

    _loadData = () => {
         dispatch(fetchUserInfo())
    }
    

export const fetchUserInfo = () => {
    return dispatch => {
        try {
            dispatch(fetchUserInfoRefresh(true))// 防止刷新两次
            http("/app/user/queryUserByUserId")(params)
                .then(data => {
                    const queryUserStarByUserId = http("/app/userPoints/queryUserStarByUserId")(params)
                    const queryAvailableCouponCountByUserId = http("/app/coupon/queryAvailableCouponCountByUserId")(params)
                    const queryUserAuth = http("/app/user/queryUserAuth")(params)
                    Promise.all([queryAvailableCouponCountByUserId, queryUserStarByUserId, queryUserAuth])
                        .then(sdata => {
                                dispatch({
                                    type: types.MY_FETCH_USER_BASE_INFO,
                                    sourceData: data,
                                    sourceSdata: sdata,
                                    fetchUserInfoRefresh: false
                                })
                            }
                        })
                })
                .catch(err => {
                        dispatch(fetchUserInfoRefresh(false))
                        dispatch(showToast("获取用户信息失败"))
                })
        } catch (err) {
                dispatch(fetchUserInfoRefresh(false))
        }
    }
}

也就是在某些情况下没有走loadData的方法，后来经过多方查找，解决了问题，链接如下：

https://github.com/facebook/react-native/commit/93b39b73262f20f0d1ec96e0e33d7b4aaff6879b

主要的意思就是说：

 

Summary:When RefreshControl.refreshing change twice within 250ms, it ignores the second changing.

如果在250毫秒内改变了两次RefreshControl的刷新状态，那么第二次的改变将会被忽略。

而后对fetchUserInfo改造如下：

export const fetchUserInfo = () => {
    return dispatch => {
        try {
            dispatch(fetchUserInfoRefresh(true))// 防止刷新两次
            http("/app/user/queryUserByUserId")(params)
                .then(data => {
                    const queryUserStarByUserId = http("/app/userPoints/queryUserStarByUserId")(params)
                    const queryAvailableCouponCountByUserId = http("/app/coupon/queryAvailableCouponCountByUserId")(params)
                    const queryUserAuth = http("/app/user/queryUserAuth")(params)
                    Promise.all([queryAvailableCouponCountByUserId, queryUserStarByUserId, queryUserAuth])
                        .then(sdata => {
                            setTimeout(() => {
                                dispatch({
                                    type: types.MY_FETCH_USER_BASE_INFO,
                                    sourceData: data,
                                    sourceSdata: sdata,
                                    fetchUserInfoRefresh: false
                                })
                            }, 300)
                            }
                        })
                })
                .catch(err => {
                    setTimeout(() => {
                        dispatch(fetchUserInfoRefresh(false))
                        dispatch(showToast("获取用户信息失败"))
                    }, 300)
                })
        } catch (err) {
                            setTimeout(() => {
                dispatch(fetchUserInfoRefresh(false))
            }, 300)
        }
    }
}

虽然是暂时解决了这个问题，但是并不是很好的解决方案，暂且记录下来。