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

赵高韵
2023-12-01

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

其中上拉刷新效果已经实现,具体思路见:《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。


 类似资料: