File tree Expand file tree Collapse file tree 1 file changed +43
-0
lines changed Expand file tree Collapse file tree 1 file changed +43
-0
lines changed Original file line number Diff line number Diff line change 1+ # react-native-SmartRefreshLayout
2+ 基于android SmartRefreshLayout https://github.com/scwang90/SmartRefreshLayout 开发的插件,可提供类似ios的弹性刷新、加载
3+ ## 第一步
4+ 工程目录下运行 npm install --save react-native-smartrefreshlayout 或者 yarn add react-native-smartrefreshlayout(已经安装了yarn)
5+ ## 第二步
6+ 运行 react-native link react-native-smartrefreshlayout
7+ ## 第三部使用
8+ 在工程中导入:
9+ ``` bash
10+ import {SmartRefreshControl,ClassicsHeader,StoreHouseHeader} from ' react-native-smartrefreshlayout' ;
11+
12+ //使用方法和RN官方的RefreshControl类似,
13+ < ScrollView
14+ refreshControl={< SmartRefreshControl
15+ ref={this.refreshControl=ref}
16+ HeaderComponent={< ClassicsHeader/> }
17+ onRefresh={()=> {
18+ setTimeout( ()=> {
19+ this.refreshControl && this.refreshControl.finishRefresh ();
20+ },1000)
21+ }}
22+ /> }
23+ >
24+ < /ScrollView>
25+ ```
26+ ## 组件
27+ ### SmartRefreshControl
28+ #### 属性表格
29+ | name| format| description|
30+ | :---:| :---:| :---:|
31+ | onRefresh| func| 刷新触发|
32+ | enableRefresh| bool| 是否启用刷新|
33+ | HeaderComponent| Component| refreshcontrol的header|
34+
35+ 注意:HeaderComponet现在只能是插件提供的Header,后续我们将改进与提供任何Component
36+ #### 方法表格
37+ | name| format| description|
38+ | :---:| :---:| :---:|
39+ | finishRefresh| {delayed: number ,success: bool }| 完成刷新|
40+ ## 示例
41+ <!-- -->
42+ <!-- <img src="https://github.com/2534290808/react-native-android-danmaku/blob/master/images/Screenshot_1513176625.png" width = "300" alt="图片名称" align=center /-->
43+
You can’t perform that action at this time.
0 commit comments