RefreshControl是React Native官方提供的下拉刷新组件,用在ScrollView和FlatList内部,为其添加下拉刷新的功能。它是对原生平台下拉刷新组件的一个封装,使用起来比较方便快捷,体验类似Native的下拉刷新组件,但其缺点是不能进行自定义下拉刷新头部,并且只能使用与ScrollView,FlatList这种带有滚动功能的组件之中。
以ScrollView为例,当ScrollView处于竖直方向的起点位置(scrollY:0),此时下拉会触发一个onRefresh
事件。
属性
属性 | 类型 | 描述 |
---|---|---|
onRefresh | function | 当视图开始刷新的时候调用 |
refreshing | bool | 决定加载进去指示器是否为活跃状态,也表名当前是否在刷新中 |
android平台特有
属性 | 类型 | 描述 |
---|---|---|
colors | ColorPropType | 指定至少一种颜色用来绘制刷新指示器。 |
enabled | bool | 指定是否要开启刷新指示器。 |
progressBackgroundColor | ColorPropType | 指定刷新指示器的背景色。 |
size | RefreshLayoutConsts.SIZE.DEFAULT | 指定刷新指示器的大小,具体数值可参阅RefreshControl.SIZE. |
progressViewOffset | React.PropTypes.number | 指定刷新指示器的垂直起始位置(top offset)。 |
ios平台特有
属性 | 类型 | 描述 |
---|---|---|
tintColor | ColorPropType | 指定刷新指示器的颜色。 |
iostitle | string | 指定刷新指示器下显示的文字。 |
使用实例
前面介绍了RefreshControl组件的相关属性,下面用实例演示RefreshControl的具体使用方法。(在官方实例基础上做了ES6语法改造)
以ScrollView为例,在ScrollView中通过设置refreshControl
属性来指定RefreshControl组件,用于为ScrollView提供下拉刷新功能,然后设置RefreshControl的onRefresh
方法控制刷新时具体操作。
import React, { Component } from 'react';
import {
AppRegistry,
ScrollView,
StyleSheet,
Text,
View,
RefreshControl,
} from 'react-native';
class ListRowComponent extends React.Component{
render(){
return (
<View style={styles.row}>
<Text style={styles.text}>
{this.props.data.text}
</Text>
</View>
);
}
};
export default class RefreshControlDemo extends Component {
constructor(props) {
super(props);
this.state = {
isRefreshing: false,
loaded: 0,
rowData: Array.from(new Array(10)).map(
(val, i) => ({text: i})),
};
}
render() {
var rows = this.state.rowData.map((row, indexKey) => {
return <ListRowComponent key={indexKey} data={row}/>;
});
return (
<ScrollView style={styles.scrollview} refreshControl={ //设置下拉刷新组件
<RefreshControl
refreshing={this.state.isRefreshing}
onRefresh={this.onRefresh.bind(this)} //(()=>this.onRefresh)或者通过bind来绑定this引用来调用方法
tintColor='red'
title= {this.state.isRefreshing? '刷新中....':'下拉刷新'}
/>
}>
{rows}
</ScrollView>
);
}
onRefresh() {
this.setState({isRefreshing: true});
setTimeout(() => {
// 准备下拉刷新的5条数据
var rowNewData = Array.from(new Array(5))
.map((val, i) => ({
text: '下拉刷新增加的数据行 ' + (+this.state.loaded + i)
}))
.concat(this.state.rowData);
this.setState({
loaded: this.state.loaded + 5,
isRefreshing: false,
rowData: rowNewData,
});
}, 2000);
}
}
const styles = StyleSheet.create({
row: {
borderColor:'red',
borderWidth:5,
padding:20,
backgroundColor:'#00CCFF',
margin:5,
},
text:{
alignSelf:'center',
color:'white',
},
scrollerview:{
flex:1,
}
});