0.5.1 • Published 6 years ago
react-native-smartrefreshlayout-next v0.5.1
react-native-SmartRefreshLayout
基于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 | 线宽 |