1、react-native-pullrefresh-scrollview是第三方上拉刷新下拉加载组件。引用方法：打开命令行并进入项目根目录，执行命令行npm install --save react-native-pullrefresh-scrollview

引用第三方组件.png

命令行执行成功后，可以在项目中的node_modules文件下找到react-native-pullrefresh-scrollview

react-native-pullrefresh-scrollview.png

import PullRefreshScrollView from 'react-native-pullrefresh-scrollview';
render() {
   return (
      <ListView
        renderScrollComponent={(props) => <PullRefreshScrollView onRefresh={(PullRefresh)=>this.onRefresh(PullRefresh)} useLoadMore={1}{...props}     />}
        dataSource={this.state.dataSource}
        renderRow={this._renderRow.bind(this) }
        style={styles.listView}
       />
   );
}
 onRefresh(PullRefresh){
            PullRefresh.onRefreshEnd();
    }
onLoadMore(PullRefresh) {
            PullRefresh.onLoadMoreEnd();
    }

3、消息列表代码及运行效果

消息列表.png

下拉加载.png

上拉刷新.png

已加载完成.png

/** * Created by liyongfei on 16/12/27. */
import React, { Component } from 'react';
import {    
      StyleSheet,   
      Text,  
      View,   
      ListView
} from 'react-native';import NetUtil from './NetUtil';import PullRefreshScrollView from 'react-native-pullrefresh-scrollview';var Dimensions = require('Dimensions');
var {width} = Dimensions.get('window');
class MessageView extends Component {    
        constructor(props) {        
                 super(props);        
                 this.state = {          
                             dataSource: new ListView.DataSource({     rowHasChanged: (row1, row2) => row1 != row2}),       
                             load: false,         
                             curpage:1,        
                          }
    }; 
   render() {         
   return (              
               <View style={styles.container}>        
               <ListView renderScrollComponent={(props) => <PullRefreshScrollView onRefresh={(PullRefresh)=>this.onRefresh(PullRefresh)} onLoadMore={(PullRefresh)=>this.onLoadMore(PullRefresh)} useLoadMore={1}{...props} />}                   
                  dataSource={this.state.dataSource}             
                  renderRow={this._renderRow.bind(this) }             
                />       
               </View>         
   );  
  }  
  // 请求网络结束下拉刷新状态 
  onRefresh(PullRefresh){    
          var _this=this;    
          let data = {'curpage':'1'};     
          let   url = 'http://192.168.0.85/mobile/index.php?act=mb_push&op=getSPushList';      
          var common = NetUtil.commonParamsWithAct('mb_push', 'getSPushList');      
          NetUtil.post(url, data, common, function (set) {     
                   if (set.code == 10000) {          
                           _this.setState({               
                                   dataSource: _this.state.dataSource.cloneWithRows( set.datas.pushList),             
                                   load: true           
                               });             
                           PullRefresh.onRefreshEnd();      
                     } else {            
                           alert("网络繁忙,请稍后");         
                     }      
  });  
  }  
  // 请求网络数据将加载更多数据状态改为已加载完成    onLoadMore(PullRefresh){      
          var _this=this;      
          var pages=_this.state.curpage+1;     
          _this.setState({     curpage:pages        });    
          let data = {'curpage':pages};     
          let url  = 'http://192.168.0.85/mobile/index.php?act=mb_push&op=getSPushList';     
          var common = NetUtil.commonParamsWithAct('mb_push', 'getSPushList');      
           NetUtil.post(url, data, common, function (set) {       
                   if (set.code == 10000) {           
                         _this.setState({               
                                  dataSource: _this.state.dataSource.cloneWithRows( set.datas.pushList),               
                                  load: true              
                             });              
                         PullRefresh.onLoadMoreEnd();      
                    } else {             
                          alert("网络繁忙,请稍后");       
                    }      
  }); 
  }   
 _renderRow(rowData,sectionID, rowID) {     
       return (        
              <View style={styles.itemView}>          
              <Text style={styles.itemTime}>{rowData.update_time}</Text>             
              <View  style={styles.itemBg}>        
              <Text style={styles.itemInfo}>{rowData.push_content.alert}</Text>              
              </View>         
             </View>      
  );    
}  
  componentWillMount() {     
             this.fetchData();   
 }   
 fetchData() {     
         var _this=this;    
         let data = {'curpage':'1'};    
         let url = 'http://192.168.0.85/mobile/index.php?act=mb_push&op=getSPushList';     
         var common = NetUtil.commonParamsWithAct('mb_push', 'getSPushList');      
         NetUtil.post(url, data, common, function (set) {      
                     if (set.code == 10000) {           
                            _this.setState({             
                                   dataSource: _this.state.dataSource.cloneWithRows( set.datas.pushList),             
                                  load: true          
                               });         
                      } else {             
                             alert("网络繁忙,请稍后");     
                       }       
        });  
  }
}
const styles = StyleSheet.create({ 
   container: {      
        flex: 1,    
        marginBottom:70 
   }, 
   itemView:{    
        width:width,     
        height:70,      
        backgroundColor:'#FFFAF0',  
  },   
 itemTime:{   
        width:width,    
        height:40,      
        fontSize:18,    
        top:10,       
        textAlign:'center'  
  },   
 itemBg:{    
        width:width-40,   
        height:30,      
        backgroundColor:'#007AFF',   
        borderRadius:8,       
        alignSelf:'center',  
  },  
  itemInfo:{    
        width:width-50,    
        height:30,     
        left:10,      
        backgroundColor:'white',   
        padding:7   
 },
});
module.exports = MessageView;