react native之listview加下拉刷新上拉分页

直接上代码

var REQUEST_URL = 'xxxx&page=';
import React, { Component } from 'react';
import {
  AppRegistry,
  Image,
  StyleSheet,
  Text,
  View,
   ListView,
   RefreshControl,
} from 'react-native';
let page = 1;
let data = [];
export default class MyProject extends Component {
     constructor(props) {
         super(props);
         this.state = {
             dataSource: new ListView.DataSource({
                 rowHasChanged: (row1, row2) => row1 !== row2,
             }),
             loaded: false,
         };
     }

     componentDidMount(){
         this.fetchData();
     }

     fetchData() {
         fetch(REQUEST_URL+this.state.page)
             .then((response) => response.json())
             .then((responseData) => {
             data=responseData.info.data;
                 this.setState({
                     dataSource: this.state.dataSource.cloneWithRows(responseData.info.data),
                     loaded: true,
                 });
             })
             .done();
     }
reloadWordData() {
                return new Promise((resolve) => {
                        setTimeout(()=>{resolve()}, 2000)
                });
        }
     render() {
         if (!this.state.loaded) {
             return this.renderLoadingView();
         }

         return (
             <ListView
                refreshControl={
                                                        <RefreshControl
                                                            refreshing={false}
                                                            onRefresh={this.reloadWordData.bind(this)}
                                                        />}
                 dataSource={this.state.dataSource}
                 renderRow={this.renderMovie}
                 style={styles.listView}
                 onEndReached={this.onEndReached.bind(this)}
                  onEndReachedThreshold = { 100 }
             />
         );
     }

       onEndReached() {



           this.loadMore();

       }

       loadMore() {
       page=page+1;
           fetch(REQUEST_URL+page)
                        .then((response) => response.json())
                        .then((responseData) => {
                        data = data.slice().concat(responseData.info.data);
                            this.setState({


                 dataSource: this.state.dataSource.cloneWithRows(data),
                                      loaded: true,
               });
             })
             .done();
         }

     renderLoadingView()
     {
         return (<View style={styles.container} >
                 <Text>Loading ......</Text>
             </View>

         );
     }

     renderMovie(movie) {
         return (
             <View style={styles.container}>
                 <Image
                     source={{uri: movie.image}}
                     style={styles.thumbnail}
                 />
                 <View style={styles.rightContainer}>
                     <Text style={styles.title}>{movie.title}</Text>
                     <Text style={styles._create_time}>{movie._create_time}</Text>
                 </View>
             </View>
         );
     }

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    marginBottom: 10,
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
    thumbnail: {
    width: 81,
    height: 53,
    marginLeft:30,
  },
    rightContainer: {
    flex: 1,
  },
  title: {
    fontSize: 20,
    marginBottom: 8,
    textAlign: 'center',
  },
  _create_time: {
    textAlign: 'center',
  },
       listView: {
         paddingTop: 20,
         backgroundColor: '#F5FCFF',
     },

});

AppRegistry.registerComponent('testrn', () => MyProject);