react native RefreshControl 使用详解

RefreshControl 可以用在ScrollView或ListView 的refreshControl属性上，用于下拉刷新。

onRefresh：开始刷新时调用
refreshing：设置为true显示指示器，false：隐藏。
colors（android）：指示器颜色，可以多个，循环显示。
progressBackgroundColor（android）：指示器背景颜色
size（android）：值：[0,1]。指示器大小，默认1，0:large
progressViewOffset（android）：指示器距离顶部的位置，默认0.
tintColor（ios）：指示器颜色
title（ios）：指示器下显示的文字
titleColor（ios）：指示器下显示的文字的颜色

/** * Created by on 2017/5/17. */import React, {Component} from 'react';import {    StyleSheet,    View,    Text,    ScrollView,    RefreshControl,} from 'react-native';export default class RefreshControlDemo extends Component {    static navigationOptions = {        title: 'RefreshControl',    };    state = {        loaded:0,        isRefreshing: false,        data: Array.from(new Array(20)).map((val, i) => ({text: '初始化： ' + i, clicks: 0})),    }    _onRefresh = () => {        this.setState({isRefreshing: true});        setTimeout(() => {            // prepend 10 items            const rowData = Array.from(new Array(10))                .map((val, i) => ({                    text: '第几次加载： ' + (+this.state.loaded + i),                    clicks: 0,                }))                .concat(this.state.data);            this.setState({                loaded: this.state.loaded + 10,                isRefreshing: false,                data: rowData,            });        }, 3000);    }    render() {        return (            <ScrollView                style={{flex:1}}                refreshControl={                  <RefreshControl                    refreshing={this.state.isRefreshing}                    onRefresh={this._onRefresh}                    tintColor="#ff0000"                    title="Loading..."                    titleColor="#00ff00"                    size={0}                    progressViewOffset={30}                    colors={['#0000ff','#ff0000', '#00ff00', ]}                    progressBackgroundColor="#ffff00"                  />                }>                <View>                    {                        this.state.data.map((row, ii) => {                            return (<Text>{row.text}</Text>);                        })                    }                </View>            </ScrollView>        );    }}

github下载地址