@her-app/react-native-smartrefreshlayout v0.6.2

react-native-SmartRefreshLayout(完全可使用RN自定义的下拉刷新插件)

基于android SmartRefreshLayout https://github.com/scwang90/SmartRefreshLayout 开发的插件，可提供类似ios的弹性刷新,如果你喜欢，请不要吝啬你的 :smile: star :smile:

ios自动刷新组件见react-native-MJRefresh

第一步

工程目录下运行 npm install --save react-native-smartrefreshlayout 或者 yarn add react-native-smartrefreshlayout(已经安装了yarn)

第二步

运行 react-native link react-native-smartrefreshlayout

第三部使用

在工程中导入：

import {SmartRefreshControl,ClassicsHeader,StoreHouseHeader,DefaultHeader} from 'react-native-smartrefreshlayout';

//使用方法和RN官方的RefreshControl类似，
<ScrollView 
  refreshControl={<SmartRefreshControl
     ref={refreshcontrol=>this.refreshControl=refreshcontrol}
     HeaderComponent={<DefaultHeader/>}
     onRefresh={()=>{
       setTimeout(()=>{
       this.refreshControl && this.refreshControl.finishRefresh();
       },1000)
     }}
  />}
>
</ScrollView>

组件

SmartRefreshControl

属性表格

注意：HeaderComponet现在支持任意的RN组件，但是需要放在AnyHeader的组件中，其中onHeaderPulling、onHeaderReleasing和onHeaderMoving的参数为{nativeEvent:{percent,offset,headerHeight}},可用来控制下拉和释放过程中更为精细的动画 如果下拉和释放过程不需要过程动画，则使用onPullDownToRefresh和onReleaseToRefresh即可实现，请看示例：Example HuaweiRefreshControl

LottieRefreshControl

建议:该组件与lottie-react-native配合使用可获得绝佳的下拉动画效果

方法表格

AnyHeader

属性表格

ClassicsHeader/DefaultHeader

属性表格

StoreHouseHeader

属性表格

示例