react native学习笔记12——RefreshControl下拉刷新

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

源码Git地址