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),});
             })
             .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,_create_time: {
    textAlign: 'center',listView: {
         paddingTop: 20,});

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!