react-native-smartrefreshlayout-next

基于android SmartRefreshLayout的封装

Usage no npm install needed!

<script type="module">
  import reactNativeSmartrefreshlayoutNext from 'https://cdn.skypack.dev/react-native-smartrefreshlayout-next';
</script>

README

react-native-SmartRefreshLayoutnpm version

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

第一步

工程目录下运行 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 刷新触发
enableRefresh bool 是否启用刷新
HeaderComponent Component refreshcontrol的header

注意:HeaderComponet现在只能是插件提供的Header,后续我们将改进与提供任何Component

方法表格

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

ClassicsHeader/DefaultHeader

属性表格

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

StoreHouseHeader

属性表格

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