react native实现上拉加载下拉刷新

来源：互联网发布：华罗庚的优化法时间编辑：程序博客网时间：2024/05/22 14:54

前言

http://blog.csdn.net/xiangzhihong8/article/details/54577644

我们在做原生app开发的时候，很多场景都会用到下拉刷新、上拉加载的操作，Android中如PullToRefreshListView，iOS中如MJRefresh等都是比较好用，且实现上比较简单的第三方库。他们的实现原理大体相同，都是在列表的基础上新增头部和尾部，然后新增手势触摸的逻辑判断。那么对于React Native，我们也可以用相同的原理来实现。

react-native-pull

这里我们首先要介绍一款兼容Android和ios的组件：react-native-pull
我们首先来看一下React-native-pull的运行效果如何：
这里写图片描述

PullView 使用

在自己的工程中执行引入，当然也可以自己封装个

npm  install  react-native-pull --save1
1

和其他的第三方库使用一样，引入包，然后添加标签对：

import {PullView} from 'react-native-pull';onPullRelease(resolve) {  //do something  resolve();}<PullView onPullRelease={this.onPullRelease}>//省略n多逻辑</PullView>1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10

完整代码如下：

import {PullView} from 'react-native-pull';export default class extends Component {    constructor(props) {        super(props);        this.state = {refreshing: false};        this.onPullRelease = this.onPullRelease.bind(this);        this.topIndicatorRender = this.topIndicatorRender.bind(this);    }    onPullRelease(resolve) {        //do something        setTimeout(() => {            resolve();        }, 3000);    }    topIndicatorRender(pulling, pullok, pullrelease) {        const hide = {position: 'absolute', left: 10000};        const show = {position: 'relative', left: 0};        if (pulling) {            this.txtPulling && this.txtPulling.setNativeProps({style: show});            this.txtPullok && this.txtPullok.setNativeProps({style: hide});            this.txtPullrelease && this.txtPullrelease.setNativeProps({style: hide});        } else if (pullok) {            this.txtPulling && this.txtPulling.setNativeProps({style: hide});            this.txtPullok && this.txtPullok.setNativeProps({style: show});            this.txtPullrelease && this.txtPullrelease.setNativeProps({style: hide});        } else if (pullrelease) {            this.txtPulling && this.txtPulling.setNativeProps({style: hide});            this.txtPullok && this.txtPullok.setNativeProps({style: hide});            this.txtPullrelease && this.txtPullrelease.setNativeProps({style: show});        }        return (            <View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center', height: 60}}>                <ActivityIndicator size="small" color="gray" />                <Text ref={(c) => {this.txtPulling = c;}}>下拉刷新pulling...</Text>                <Text ref={(c) => {this.txtPullok = c;}}>松开刷新pullok......</Text>                <Text ref={(c) => {this.txtPullrelease = c;}}>玩命刷新中pullrelease......</Text>            </View>        );    }  render() {    return (      <View style={[styles.container]}>        <PullView style={{width: Dimensions.get('window').width}} onPullRelease={this.onPullRelease} topIndicatorRender={this.topIndicatorRender} topIndicatorHeight={60}>            <View style={{backgroundColor: '#eeeeee'}}>                //省略列表的数据            </View>        </PullView>      </View>    );  }}const styles = StyleSheet.create({  container: {    flex: 1,    justifyContent: 'center',    alignItems: 'center',    backgroundColor: '#F5FCFF',  },  welcome: {    fontSize: 20,    textAlign: 'center',    margin: 10,  },  instructions: {    textAlign: 'center',    color: '#333333',    marginBottom: 5,  },});1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

上面的代码种有几个核心的属性需要说明：
onPullRelease：在pullrelease状态时候调用的方法
topIndicatorRender：顶部刷新时候执行的方法（里面三个参数代表三种不同的状态）

pulling：正在下拉的状态
Pullok:已经拉倒位置，可以放手的状态
pullrelease: 放手加载的状态

renderHeader：渲染头部的方法，如：

<View  style={styles.title}><Text style={{fontWeight:'bold'}}>上拉刷新控件<Text></View>1
2
3
1
2
3

renderRow：渲染每行显示的数据。
onEndReached：到达底部出发的监听
renderFooter：判断是否加载结束，刷新状态提示的隐藏和显示

PullList 使用

import {PullList} from 'react-native-pull';  onPullRelease(resolve) {    //do something    resolve();  }  <PullList onPullRelease={this.onPullRelease} {  ...and some ListView Props  }/>1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9

其他属性

style: 设置组件样式，比如可以设width/height/backgroudColor等
topIndicatorRender: 顶部刷新指示组件的渲染方法, 接受三个参数: ispulling, ispullok, ispullrelease
topIndicatorHeight: 顶部刷新指示组件的高度, 若定义了topIndicatorRender则同时需要此属性
isPullEnd: 是否已经下拉结束，若为true则隐藏顶部刷新指示组件，非必须
仅PullView支持普通refreshcontrol的相关属性
onRefresh: 开始刷新时调用的方法
refreshing: 指示是否正在刷新

react-native-pullRefreshScrollView

说完react-native-pull，我们再来看一个目前只支持ios的框架react-native-pullRefreshScrollView，该组件可以实现界面的定制（头部，底部View的样式修改，唯一不足的是暂时不支持Android），先看下运行的效果：
这里写图片描述

使用

该组件使用也是相当的简单和方便，来看ListView中如何使用：

import PullRefreshScrollView from 'react-native-pullrefresh-scrollview';render() {   return (      <ListView        renderScrollComponent={(props) => <PullRefreshScrollView onRefresh={(PullRefresh)=>this.onRefresh(PullRefresh)} {...props}     />}        dataSource={this.state.dataSource}        renderRow={(rowData) => <Text>{rowData}</Text>}       />   );}1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
11
12

Scrollview使用

import PullRefreshScrollView from 'react-native-pullrefresh-scrollview';render() {        return (                <PullRefreshScrollView ref="PullRefresh" onRefresh={()=>this.onRefresh()}>                    <View><Text>Scroll1</Text></View>                </PullRefreshScrollView>        );  }1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10

附上源码链接：https://github.com/xiangzhihong/react-native-pullRefreshScrollView

0 0