《React-Native系列》23、 js实现下拉刷新效果（Android和iOS通用）

这几天项目里有这么个需求：一个列表页需要支持下拉刷新和上拉刷新。

其中上拉刷新效果已经实现，具体思路见：《React-Native系列》19、 ListView组件之上拉刷新（iOS和Android通用）

今天我们重点来说说下拉刷新的实现。

ReactNative提供一个组件RefreshControl，但是不支持自定义刷新UI，我们的RN项目只是整个APP的一部分，需要和原生的UI保持一致，所以被我们所弃用。

刚开始，我们自己用LIstView来实现。

利用onPanResponderMove和onPanResponderRelease这两个方法来控制坐标，当下拉到阈值时，触发下拉事件，在iOS上没有什么问题。

但是我们迁移到Android上的时候，发现各种蛋疼的问题：

1、MEIZU手机上对onPanResponderMove的响应不灵敏

2、坐标值出现各种异常的值

咋办？ 问题还得解决不是。

后来的实现方案是：

利用了一个开源的第三方库：react-native-pull ，感兴趣的可以去看看，提供了Demo，使用比较简单。

简介如下：

React-native-pull包含两个（PullView & PullList）可以实现下拉刷新的React Native组件，可支持android & ios，简单易用！
纯js代码，基于ScrollView & ListView封装. 比scrollview & ListView更强大，有三个下拉状态: pulling, pullok, pullrelease. PullView可以让你使用refreshControl或提供的相关属性实现类似于scrollview的pull-to-refresh. PullList可以让你使用ListView的所有属性。你也可以使用topIndicatorRender和onPushing方法实现带有动画效果的自定义的topIndicator头部。

目前还没有发现什么bug，关键是这个组件可以支持自定义UI。