react-native list refresh and loadmore demo

sample list refresh and loadmore demo

'use strict';

var React = require('react-native');

var {
  StyleSheet,
  View,
  ListView,
  TouchableHighlight,
  RefreshControl,
  Image,
  Text
} = React;

class History extends React.Component {

  constructor(props){
   super(props);
   var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2})
   this.state = {
     dataArray:this._getData(),
     dataSource: ds.cloneWithRows(this._getData()),
     isRefreshing:false,
     loadMore:false
   }
   

 }

 _getData(){

  let data=[];
  for (let i = 0; i < 10; i++) {
   data.push(
   {
    title:'Gank.io',
    url:'http://ww2.sinaimg.cn/large/7a8aed7bjw1f0cw7swd9tj20hy0qogoo.jpg'
  }

  );
 }

 return data;
}


_renderItem(contentData,sectionId,highlightRow){
  console.log(">>>>>>>>>>>>>>>>>"+contentData);
  return(
    <TouchableHighlight
    >

    <View style={styles.itemContainer}>

    <Text style={[styles.title]}>{contentData.title}</Text>
    <Image source={{uri: contentData.url}}
    style={styles.thumbnail}/>

    </View>

    </TouchableHighlight>

    );

}

_refresh(){

  if (this.state.isRefreshing) {
    return;
  }
  this.setState({
    isRefreshing:true ,
  });
  var that = this;
  setTimeout(function(){
    that.setState({
      isRefreshing:false ,
    });
  },2000);


}

_loadmore(){

 this.setState({
   loadMore:true ,
 });

 var moreData =[
 {
  title:'JINGDQ',
  url:'http://ww2.sinaimg.cn/large/7a8aed7bjw1f0cw7swd9tj20hy0qogoo.jpg'
},
{
  title:'JINGDQ',
  url:'http://ww2.sinaimg.cn/large/7a8aed7bjw1f0cw7swd9tj20hy0qogoo.jpg'
},{
  title:'JINGDQ',
  url:'http://ww2.sinaimg.cn/large/7a8aed7bjw1f0cw7swd9tj20hy0qogoo.jpg'
}

] ;
var newData = [...this.state.dataArray,...moreData];
var that = this;
setTimeout(function(){
  that.setState({
    dataArray:newData,
    dataSource:that.state.dataSource.cloneWithRows(newData) ,
    loadMore:false
  });
},2000);



}


render() {

  let loadmoreAnimation = this.state.loadMore?(

   <Text style={styles.loadMore}>加载更多....</Text>
   ):null;
   return (
   <View style={styles.container}>
   <ListView
   style={{flex:1}}
   dataSource={this.state.dataSource}
   renderRow={this._renderItem.bind(this)}
   onEndReached={this._loadmore.bind(this)}
   onEndReachedThreshold = {40}
   refreshControl={

    <RefreshControl
    refreshing={this.state.isRefreshing}
    onRefresh={this._refresh.bind(this)}
    tintColor='#aaaaaa'
    title='Loading...'
    progressBackgroundColor='#aaaaaa'
    />


  }
  />
  
  {loadmoreAnimation}

  </View>
  );
}
}

var styles = StyleSheet.create({
  container:{
    flex:1,
    paddingTop:30,
    // backgroundColor:'#f00'
  },
  itemContainer:{

    flexDirection:'column',
    justifyContent:'center',
    alignItems:'center',
    paddingTop:20
  },
  thumbnail:{
    width:300,
    height:200,
   
   alignSelf: 'stretch'
  },
  title: {// alignSelf 默认是center
    fontSize: 15,
    marginBottom: 10,
    marginRight: 35,
    marginLeft: 35,
    // letterSpacing: 10,//字间距
    lineHeight: 22, // 行距＋字高，0表示和字高一样，没效果
    color: 'black',
    textAlign: 'center' // 字的对其方式：center每行都居中；left，right；auto ＝＝＝ justify ＝＝＝ left
  },
  loadMore:{
    fontSize:16,
    color:'red',
    textAlign:'center',
    lineHeight:40,
    width:300,
    height:50
  }
});


module.exports = History;