11 React Native常用组件-RefreshConto

(申明: 此系列教程,转载旋之华微信公众号,如有侵权 . 通知删除~)

(大家可以添加他的微信公众号了解更多内容.)

image.png

RefreshContorl这一组件可以用在ScrollView或ListView内部，为其添加下拉刷新的功能。当ScrollView处于竖直方向的起点位置（scrollY: 0），此时下拉会触发一个onRefresh事件。

一、属性方法

（1）

onRefresh

function 在视图开始刷新的时候调用

（2）

refreshing

bool 视图是否在刷新时显示指示器，也表明当前是否在刷新中

（3）

colors

[ColorPropType] android平台适用 进行设置加载进去指示器的颜色，至少设置一种，最多可以设置4种

（4）

**enabled **

bool android平台适用 用来设置下拉刷新功能是否可用

（5）

progressBackgroundColor

ColorPropType 设置加载进度指示器的背景颜色

（6）

size

RefreshLayoutConsts.SIZE.DEFAULT android平台适用 加载进度指示器的尺寸大小

（7）

tintColor

ColorPropType iOS平台适用 设置加载进度指示器的颜色

（8）

title

string iOS平台适用 设置加载进度指示器下面的标题文本信息

二、案例实操

2.0 核心代码

refreshControl={
          <RefreshControl
            refreshing={this.state.isRefreshing}
            onRefresh={this._onRefresh}
            tintColor="#ff0000"
            title="Loading..."
            titleColor="#00ff00"
            colors={['#ff0000', '#00ff00', '#0000ff']}
            progressBackgroundColor="#ffff00"
          />
        }

2.1 具体代码

image image image image

2.2 运行结果

image