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

RefreshControl是React Native官方提供的下拉刷新组件，用在ScrollView和FlatList内部，为其添加下拉刷新的功能。它是对原生平台下拉刷新组件的一个封装，使用起来比较方便快捷，体验类似Native的下拉刷新组件，但其缺点是不能进行自定义下拉刷新头部，并且只能使用与ScrollView，FlatList这种带有滚动功能的组件之中。
以ScrollView为例，当ScrollView处于竖直方向的起点位置（scrollY:0），此时下拉会触发一个onRefresh事件。

属性

android平台特有

ios平台特有

使用实例

前面介绍了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地址