基础篇章：关于 React Native 之 RefreshControl 组件的讲解

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  ListView,
  Image,
  TouchableHighlight,
  RefreshControl,
  View
} from 'react-native';

class RefreshControlDemo extends Component {
  constructor(props) {
    super(props);
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      isRefreshing: false,
      dataSource: ds.cloneWithRows(this._genRows(-1)),
    };
  }

  _genRows(flag){
        const dataBlob = [];
        for(let i = 0 ; i< 88 ; i ++ ){
          if(i == flag){
            dataBlob.push("非著名程序员+我被打了"+i);
          }else{
             dataBlob.push("非著名程序员"+i);
          }
        }
        return dataBlob;
    }

  render() {
    return (
        <ListView
          dataSource={this.state.dataSource}
          renderRow={this._renderRow.bind(this)}
          refreshControl={
          <RefreshControl
            refreshing={this.state.isRefreshing}
            onRefresh={this._onRefresh.bind(this)}
            tintColor="#ff0000"
            colors={['#ff0000', '#00ff00', '#0000ff']}
            progressBackgroundColor="#ffff00"
            enabled={true}  
          />
        }
        />
    );
  }

  _renderRow (rowData,sectionID, rowID) {
    return (
        <TouchableHighlight onPress={() => {
          this._pressRow(rowData,rowID);
        }}
        underlayColor='red'
        >
          <View>
            <View style={styles.row}>
              <Image style={{width:40,height:40}} source={require('./Thumbnails/head.jpg')}/>
              <Text style={{flex:1,fontSize:20,marginLeft:20}}>
                {rowData}
              </Text>
            </View>
          </View>
        </TouchableHighlight>
    );
   }

  _pressRow(rowData,rowID){
        alert(rowData);
        this.setState({dataSource: this.state.dataSource.cloneWithRows(
        this._genRows(rowID))});
    }

    _refreshRows(){
        const dataBlob = [];
        for(let i = 0 ; i< 8 ; i ++ ){
            dataBlob.push("我爱非著名程序员");
        }
        return dataBlob;
    }


    _onRefresh(){
      this.setState({isRefreshing: true});
      setTimeout(() => {
      this.setState({
        isRefreshing: false,
        dataSource: this.state.dataSource.cloneWithRows(
        this._refreshRows())
      });
    }, 5000);
    }
}

const styles = StyleSheet.create({
    container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  row: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems:'center',
    padding: 10,
  },
});

AppRegistry.registerComponent('RefreshControlDemo', () => RefreshControlDemo);