RN笔记-RefreshControl原生态刷新控件

原生态刷新控件

在开发过程中，经常要用到刷新控件，iOS中比较热门使用第三方的刷新控件，然而却忽略了苹果系统原生的刷新效果，整体简洁大方美观，同样的在react-native中也提供了这样的刷新效果。以下将提供在ios和rn开发过程对RefreshControl的编写方法。

一、IOS中使用方法

-(void)viewDidLoad {
  
  [super viewDidLoad];
  
  _tableView = [[UITableView alloc]initWithFrame:CGRectMake(0,64,self.view.frame.size.width,self.view.frame.size.height-64) style:UITableViewStylePlain];
  
  [self.viewaddSubview:_tableView];
  
  _tableView.backgroundView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"bj"]];
  
  //刷新的控件
  
  _control = [[UIRefreshControl alloc]init];
  
  [_tableView addSubview:_control];
  
  [_control addTarget:self action:@selector(refresh) forControlEvents:UIControlEventValueChanged];
  

}

//刷新时调用的方法
-(void)refresh
{
  if(_isLoading)
  {
    [_control endRefreshing];
    
    return;
  }
  
  //模拟下载数据
  
  _isLoading = YES;
  
  NSData*data = [NSData dataWithContentsOfURL:[NSURLURLWithString:@"http://www.baidu.com"]];
  
  NSLog(@"%ld",data.length);
  
  [_tableView reloadData];
  
  [_control endRefreshing];
  
  _isLoading = NO;
}

二、RN中使用方法

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

// 导入外部组件
var Service = require('../../Common/Service');
var Util = require('../../Common/Util');

var Dimensions = require('Dimensions');
var {width, height} = Dimensions.get('window');

var ConsultList = React.createClass({
getDefaultProps(){
  return{
    popToHome:null,
    classid:'',
    htmlContent:null
  }
},

  getInitialState(){
    //创建数据源
    var ds = new ListView.DataSource({rowHasChanged:(row1, row2) => row1 !== row2});
    //初始化数据源
    return {
      dataSource: ds,
      isEmptyData:false,
      isRefreshing:true
    }
  },
  render() {
    return (
        this.state.isEmptyData ?
        this.isEmptyData() :
        <View style={styles.container}>
          { /*列表*/ }
          <ListView
            dataSource={this.state.dataSource}
            renderRow={this.renderRow}
            refreshControl={
             <RefreshControl
             refreshing={this.state.isRefreshing}
             tintColor="gray"
             title="正在刷新"
             onRefresh={this._onRefresh}/>}
          />
      </View>
    );
  },
  _onRefresh: function() {
    console.log("刷新");
    this.setState({isRefreshing: true});
    this.getEduData();
  },
  popToHome(mark){
    if (mark == null) return;
    this.props.popToHome(mark);
  },
  popHeader(html){
    if (html == null) return;
    this.props.htmlContent(html);
  },

  renderRow(rowData){
    console.log('rowData',rowData);
    return(
      <TouchableOpacity onPress={()=>this.popHeader(rowData.newscontent)}>
        <View style={styles.listViewStyle}>
          { /*左边*/ }
          <Image source={{uri:rowData.newspic}} style={styles.imageViewStyle}/>
          { /*右边*/ }
          <View style={styles.rightViewStyle}>
            <View style={styles.rightTopViewStyle}>
              <Text style={{color:'#333333'}}>{rowData.newstitle}</Text>
            </View>
            <View style={styles.rightBottomViewStyle}>
              <Text style={{color:'gray'}}>{rowData.newsremark}</Text>
            </View>
          </View>
        </View>
      </TouchableOpacity>
    )
  },

componentDidMount(){
  //从网络上请求数据
  this.getEduData();
},
getEduData(){

  var url = Service.consultListUrl;
  let formData = new FormData();
  formData.append("extend",'zhSPe69X8gPAI9Zk5tHMGc01aMyvch2dEmvzOWIr3pI=');

  fetch(url,{
    method:'POST',
    headers:{
        'Content-Type':'multipart/form-data',
    },
    body:formData,
  })
  .then((response) => response.text() )
  .then((responseData)=>{

    console.log('responseData',responseData);
    this.getEduListData();
  })
  .catch((error)=>{console.error('error',error)
      alert(error);
  });
},

getEduListData(){
  var url = Service.consultListUrl;
  let formData = new FormData();
  formData.append('extend','zhSPe69X8gPAI9Zk5tHMGVMFO4j2515k1lTzzhs+RC4=');
  formData.append('classid',this.props.classid);
  formData.append('keyValue','');
  formData.append('page','1');
  formData.append('pageSize','10');

  fetch(url,{
    method:'POST',
    headers:{
        'Content-Type':'multipart/form-data',
    },
    body:formData,
  })
  .then((response) => response.text() )
  .then((responseData)=>{

    // console.log('responseData',responseData);
    // json格式化  JSON.stringify(responseData)转字符串
    console.log('json格式化',JSON.parse(responseData));
    // alert(responseData);

    if (!JSON.parse(responseData).data || JSON.parse(responseData).data.length==0) {
      this.setState({
        isEmptyData:true
      });
    }
    //更新数据源
    this.setState({
      isRefreshing:false,
      dataSource:this.state.dataSource.cloneWithRows(JSON.parse(responseData).data)
    });
  })
  .catch((error)=>{console.error('error',error)
      alert(error);
  });
},
  isEmptyData(){
    return (
      <ScrollView style={{backgroundColor:'#e8e8e8'}}>
        <View style={styles.emptyDataStyle}>
          <Image source={{uri:'bv_dropbox'}} style={styles.emptyDataIcon}/>
          <Text style={{marginTop:5,color:'gray'}}>暂未有资讯</Text>
        </View>
      </ScrollView>
    )
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#e8e8e8',
  },
  imageViewStyle: {
    width:80,
    height:100
  },
  listViewStyle: {
    backgroundColor: 'white',
    padding: 10,
    borderBottomColor:'#e8e8e8',
    borderBottomWidth:0.5,
    flexDirection:'row'
  },
  rightViewStyle: {
    marginLeft:8,
    width:width-110,
    justifyContent:'center'
  },
  rightTopViewStyle: {
    flexDirection:'row',
    marginBottom:7,
    justifyContent:'space-between'
  },
  rightBottomViewStyle: {
    flexDirection:'row',
    marginTop:7,
    justifyContent:'space-between'
  },
  emptyDataStyle:{
    justifyContent:'center',
    alignItems:'center',
    marginTop:100
  },
  emptyDataIcon:{
    width:50,
    height:50,
  }
});

module.exports = ConsultList;

效果图

RefreshControl.gif