npm

npm’s 2019 JavaScript ecosystem survey analysis is now available!Get your copy here »

@smadey/react-native-smartrefreshlayout

0.6.2 • Public • Published

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

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

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

属性表格

属性名 类型 描述
onRefresh func 刷新触发
onPullDownToRefresh func 可下拉刷新时触发
onReleaseToRefresh func 可释放刷新时触发
onHeaderPulling func header下拉过程触发
onHeaderReleasing func header释放过程触发
onHeaderReleased func header释放时触发
onHeaderMoving func header移动时触发(包括下拉和释放过程)
enableRefresh bool 是否启用刷新
headerHeight number 设置Header的高度
primaryColor string 刷新控件主调色
autoRefresh {refresh,timeout} 设置自动刷新
HeaderComponent Component refreshcontrol的header
pureScroll bool 是否纯滚动
overScrollBounce bool 是否越界回弹
overScrollDrag bool 是否使用越界拖动,类似IOS样式
dragRate number 为(显示下拉高度/手指真实下拉高度=阻尼效果)
maxDragRate number 最大显示下拉高度/Header标准高度

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

LottieRefreshControl

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

方法表格

方法名 参数 描述
finishRefresh {delayed:number,success:bool} 完成刷新

AnyHeader

属性表格

属性名 类型 描述
primaryColor string 主题色

ClassicsHeader/DefaultHeader

属性表格

属性名 类型 描述
primaryColor string 主题色
accentColor string 强调色

StoreHouseHeader

属性表格

属性名 类型 描述
text string 文字(目前只支持英文)
textColor string 文字颜色
lineWidth number 线宽

示例

图片名称 图片名称 图片名称

install

npm i @smadey/react-native-smartrefreshlayout

Downloadsweekly downloads

1

version

0.6.2

license

ISC

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability