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

前言

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

react-native-pull

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

PullView 使用

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

npm  install  react-native-pull --save

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

import {PullView} from 'react-native-pull';

onPullRelease(resolve) {
  //do something
  resolve();
}

<PullView onPullRelease={this.onPullRelease}>
//省略n多逻辑
</PullView>

完整代码如下:

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,
  },
});

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

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

renderHeader:渲染头部的方法,如:

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

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

PullList 使用

import {PullList} from 'react-native-pull';

  onPullRelease(resolve) {
    //do something
    resolve();
  }
  <PullList onPullRelease={this.onPullRelease} {
  ...and some ListView Props
  }/>

其他属性

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>}
       />
   );
}

Scrollview使用

import PullRefreshScrollView from 'react-native-pullrefresh-scrollview';

render() {

        return (
                <PullRefreshScrollView ref="PullRefresh" onRefresh={()=>this.onRefresh()}>
                    <View><Text>Scroll1</Text></View>
                </PullRefreshScrollView>
        );
  }

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏我和未来有约会

Silverlight控件 - Carrousel

Silverlight控件 - Carrousel 简介: Carrousel是一个布局控件,可对其内部的子控件排出像《旋转木马》一样的效果。 项目地...

35760
来自专栏张戈的专栏

一行代码彻底禁用WordPress缩略图自动裁剪功能

记得在博客分享七牛缩略图教程的时候,提到过 WordPress 默认会将上传的图片裁剪成多个,不但占用磁盘空间,也会拖慢网站性能,相当闹心! 当时也提到了解决办...

40560
来自专栏九彩拼盘的叨叨叨

requestAnimationFrame简介

当我们写window.requestAnimationFrame(回调函数)时,浏览器会在下次重绘前执行回调函数。

10820
来自专栏猿人谷

2.检查网络状态

当应用程序需要访问网络时,它首先应该检查设备的网络状态,确认设备的网络环境及连接情况,并针对这些情况提醒用户做出相应的处理。最好能监听设备的网络状态的改变,当设...

22290
来自专栏逆向技术

winhex十六进制常用快捷键

Winhex 是一个专门用来对付各种日常紧急情况的工具。它可以用来检查和修复各种文件、恢复删除文件、硬盘损坏造成的数据丢失等。同时它还可以让你看到其他程序隐藏起...

52220
来自专栏小俊博客

Windows10中的键盘快捷方式

Windows 徽标键 + Shift + C打开超级按钮菜单Windows 徽标键 + D显示和隐藏桌面Windows 徽标键 + Alt + D显示和隐藏桌...

16120
来自专栏iOS开发日记

iOS开发系列——Storyboard

到目前为止我们还没有解释我们的程序是如何显示默认视图界面的。做过WinForm程序的朋友都知道每个Window窗口界面都有一个设计器(对应一个设计文件),其实在...

35840
来自专栏前端人人

React第三方组件1(路由管理之Router的使用⑤按需加载-下)

本教程总共6篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React第三方组件1(路由管理之Router的使用①...

30060
来自专栏谈补锅

免费真机调试 -- Xcode7

  刚新安装了Xcode7 Version 7.1 beta , 据说这个版本可以免费真机调试,于是用了一个新的AppID测试了,发现真的可以免费真机调试了呢!...

1.1K30
来自专栏岑志军的专栏

ReactNative-综合案例(03)

14740

扫码关注云+社区

领取腾讯云代金券