react native自定义实现下拉刷新上拉加载

编程语言 2018-11-09 09:20:43 阅读次数: 0

1·定义组件

PageListView.js 

/**
 * 上拉刷新/下拉加载更多 组件
 */
import React, { Component } from 'react';
import {
  Text,
  View,
  ListView,
  FlatList,
  Dimensions,
  PanResponder,
  Animated,
  Easing,
  ActivityIndicator,
} from 'react-native';
let PageList=FlatList||ListView;
//获取屏幕宽高
let {width:w, height:h}=Dimensions.get('window');
 
//pullState对应的相应的文字说明
const pullStateTextArr={
  'noPull':'正在刷新,请稍等...',
  'pulling':'下拉刷新...',
  'pullOk':'释放以刷新...',
  'pullRelease':'正在刷新,请稍等...',
};
//默认动画时长
const defaultDuration=400;
 
//1.0.3->1.1.0改动/新增:
/*
 1.手动处理数组数据,
 2.父组件重新加载数据后手动刷新数据
 2.隐藏当前ListView(放弃这个功能),
 3.从网络获取数据,数据为空时的渲染界面,
 4.解决部分手机上界面为空,不显示的问题,(鉴于自定义组件宽高实用性并不大,而且部分手机显示有问题,去除自定义组件宽高,改为自适应)(问题可能原因:从flex:1快速的改变为固定宽高时界面渲染会有问题)
 5.对放在scrollView中的支持
 6.加入可选属性allLen,对于分页显示时可以指定数据的总条数
 */
 
export default class PageListView extends Component{
  constructor(props){
    super(props);
    this.state={
      //DataSource数据源对应的数组数据
      dataArr:[],
      //ListView的数据源
      dataSource: this.props.isListView?new ListView.DataSource({
          rowHasChanged: (r1, r2)=>r1 !== r2
      }):[],
      //下面两个参数来决定是否可以调用加载更多的方法
      //ListView/FlatView中标识是否可以加载更多(当现在获取到的数据已经是全部了,不能再继续获取数据了,则设为false,当还有数据可以获取则设为true)
      canLoad: true,
      //标识现在是否ListView/FlatView现在正在加载(根据这个值来决定是否显示"正在加载的cell")(loadMore()方法进去后设为true,fetch加载完数据后设为false)
      isLoadding:false,
      //是否显示下拉刷新的cell
      ifShowRefresh:true,
      //ListView/FlatList是否可以滚动
      scrollEnabled:true,
      //记录当前加载到了哪一页
      page:1,
 
      //通过View自适应的宽高来决定ListView的宽高(或让用户来决定宽高)
      // width:this.props.width||0,
      height:this.props.height||0,
      width:0,
    //   height:0,
 
      //下拉的状态
      pullState:'pullRelease',
      pullAni:new Animated.Value(-this.props.renderRefreshViewH),
 
      //网络获取的数据是否为空
      ifDataEmpty:false,
      first:true
    };
    //创建手势相应者
    this.panResponder = PanResponder.create({
      onMoveShouldSetPanResponder: this.onMoveShouldSetPanResponder,
      onPanResponderMove: this.onPanResponderMove,
      onPanResponderRelease: this.onPanResponderRelease,
      onPanResponderTerminate: this.onPanResponderRelease,
      onShouldBlockNativeResponder: ()=>false
    });
    //下拉到什么位置时算拉到OK的状态
    this.pullOkH=parseInt(this.props.renderRefreshViewH*1.5);
    //记录ListView最后一次滚动停止时的y坐标
    this.lastListY=0;
  }
 
  static defaultProps={
    //当前控件是否为ListView
    isListView:PageList===ListView,
    //父组件处理"渲染FlatList/ListView的每一行"的方法
    renderRow:null,
    //父组件处理"下拉刷新"或"一开始加载数据"的方法
    refresh:null,
    //父组件处理"加载更多"的方法
    loadMore:null,
    //每个分页的数据数
    pageLen:0,
    //总的数据条数
    allLen:0,
 
    //如果父组件中包含绝对定位的View时传入ListView的高度
    //或者可以在父组件底部加入相应高度的透明View
    // height:0,
    // width:0,
 
    //如果需要在用当前后端返回的数组数据进行处理的话,传入回调函数
    dealWithDataArrCallBack:null,
    //如果在进行某个操作后需要对数组数据进行手动处理的话,传入回调函数
    // changeDataArr:null,
    //渲染每行View之间的分割线View
    ItemSeparatorComponent:null,
    //还有数据可以从后端取得时候渲染底部View的方法
    renderLoadMore:null,
    //没有数据(数据已经从后端全部加载完)是渲染底部View的方法
    renderNoMore:null,
    //渲染下拉刷新的View样式
    renderRefreshView:null,
    //渲染下拉刷新的View样式的高度
    renderRefreshViewH:45,
 
    //如果网络获取数据为空时的渲染界面
    renderEmpty:null,
 
    //当前组件是否是放在scrollView中(放在ScrollView中时则不能上拉刷新,下拉加载更多)
    inScrollView:false,
 
    //是否隐藏当前ListView
    // ifHide:false,
  };
 
  //取到View自适应的宽高设置给ListView
  onLayout=(event)=>{
    if(this.state.width&&this.state.height){return}
    let {width:w, height:h} = event.nativeEvent.layout;
    this.setState({width:w,height:h});
  };
 
  render() {
    if(this.state.ifDataEmpty&&this.props.renderEmpty){return this.props.renderEmpty()}
    if(this.props.inScrollView){return this.renderListView()}
    return(
      <View style={[{flex:1},{zIndex:-99999}]} onLayout={this.onLayout}>
        <Animated.View ref={aniView=>{this.aniView=aniView}} style={[{transform:[{translateY:this.state.pullAni}]},{width:this.state.width,height:this.state.height+this.props.renderRefreshViewH}]}>
          {this.props.renderRefreshView?this.props.renderRefreshView(this.state.pullState):this.renderRefreshView()}
          <View style={[{width:this.state.width,height:this.state.height}]} {...this.panResponder.panHandlers}>
            {this.renderListView()}
          </View>
        </Animated.View>
      </View>
    );
  }
 
  //ListView/FlatList的渲染
  renderListView=()=>{
    if(!this.props.isListView){
      if(this.props.pageLen){
        return(
          <PageList
            {...this.props}
            style={{}}//虽然不需要样式,但必须加,这样才能在视图更新时调用renderFooter方法
            data={this.state.dataSource}
            //当接近ListView的底部时的操作
            onEndReached={this.willReachEnd}
            //当距离底部多少距离时触发上面的这个方法 注意:在FlatList中此参数是一个比值而非像素单位。比如，0.5表示距离内容最底部的距离为当前列表可见长度的一半时触发
            onEndReachedThreshold={0.05}
            //渲染加载更多时,"加载中"的cell
            ListFooterComponent={this.renderFooter}
            //渲染每一行的cell怎么样显示
            renderItem={this.renderItem}
            keyExtractor={(item,index)=>index.toString()}
            scrollEnabled={this.state.scrollEnabled}
            onScroll={this.onScroll}
            ref={list=>{this.list=list}}
          />
        );
      }else {
        return(
          <PageList
            {...this.props}
            style={{}}//虽然不需要样式,但必须加,这样才能在视图更新时调用renderFooter方法
            data={this.state.dataSource}
            //渲染每一行的cell怎么样显示
            renderItem={this.renderItem}
            ItemSeparatorComponent={this.renderItemS}
            keyExtractor={(item,index)=>index.toString()}
          />
        );
      }
    }else {
      if(this.props.pageLen){
        return (
          <PageList
            {...this.props}
            style={{}}//虽然不需要样式,但必须加,这样才能在视图更新时调用renderFooter方法
            dataSource={this.state.dataSource}
            //当接近ListView的底部时的操作
            onEndReached={this.willReachEnd}
            //当距离底部多少距离时触发上面的这个方法
            onEndReachedThreshold={10}
            //渲染加载更多时,"加载中"的cell
            renderFooter={this.renderFooter}
            //渲染每一行的cell怎么样显示
            renderRow={this.renderRow}
            //允许空的组,加上就行(不用管)
            enableEmptySections={true}
            scrollEnabled={this.state.scrollEnabled}
            onScroll={this.onScroll}
            ref={list=>{this.list=list}}
          />
        );
      }else {
        return(
          <PageList
            {...this.props}
            style={{}}//虽然不需要样式,但必须加,这样才能在视图更新时调用renderFooter方法
            dataSource={this.state.dataSource}
            //渲染每一行的cell怎么样显示
            renderRow={this.renderRow}
            //允许空的组,加上就行(不用管)
            enableEmptySections={true}
          />
        );
      }
    }
  };
 
 
  componentDidMount(){
    this.resetAni();
    this.props.refresh((res)=>{
        console.log(res,"fffffff")
      if(!this.dealWithArr(res)){return}
      let len=res.length;
      this.updateData(res,len);
    });
  }
 
  //当快要接近底部时加载更多
  willReachEnd=()=> {
      console.log(this.state.canLoad,!this.state.isLoadding)
    if (this.state.canLoad && !this.state.isLoadding) {
      this.loadMore();
    }
  };
 
  //加载更多
  loadMore=()=>{
    this.setState({isLoadding: true,first:false});
    let page = this.state.page;
    this.props.loadMore(page,(res)=>{
      let len=res.length;
      this.setState({isLoadding:false,page:this.state.page+1});
      this.updateData(res,len,true);
    });
  };
 
  //刷新
  refreshCommon=(res)=>{
    if(!this.dealWithArr(res)){return}
    let len=res.length;
    this.updateData(res,len);
    this.setState({page:1,ifShowRefresh:false,pullState:'pullRelease',first:false});
    this.resetAni()
  };
 
  //下拉刷新
  refresh=()=>{
    this.props.refresh((res)=>{
      this.refreshCommon(res)
    });
  };
 
  //手动刷新
  manualRefresh=(res)=>{
    this.refreshCommon(res);
  };
 
  //判断传入的数据是否为数组,或数组是否为空
  dealWithArr=(res)=>{
    let isArr=Array.isArray(res);
    if(!isArr){this.setState({ifDataEmpty:true});console.warn('PageListView的数据源需要是一个数组');return false;}
    let len=res.length;
    if(!len){this.setState({ifDataEmpty:true});return false;}
    return true;
  };
 
  //ListView渲染每一行的cell
  renderRow=(rowData,group,index)=>{
    let {renderRow,ItemSeparatorComponent,pageLen,allLen}=this.props;
    let notLast=parseInt(index)!==this.state.dataArr.length-1;
    let ifRenderItemS=false;
    if(ItemSeparatorComponent){
      if(allLen){
        ifRenderItemS=parseInt(index)!==allLen-1;
      }else {
        ifRenderItemS=(pageLen&&(this.state.canLoad||notLast))||(!pageLen&&notLast);
      }
    }
    // let ifRenderItemS=this.props.ItemSeparatorComponent&&((this.props.pageLen&&(this.state.canLoad||notLast))||(!this.props.pageLen&&notLast));
    return (<View>{renderRow(rowData,index)}{ifRenderItemS&&ItemSeparatorComponent()}</View>);
  };
  //FlatList渲染每一行的cell
  renderItem=({item,index})=>{
    return this.props.renderRow(item,index);
  };
 
  //渲染cell之间的分割线组件
  renderItemS=()=>{
    return this.props.ItemSeparatorComponent&&this.props.ItemSeparatorComponent();
  };
 
  //正在加载的cell
  renderFooter=()=>{
    if (!this.state.canLoad) {
      if(this.props.renderNoMore){
        return this.props.renderNoMore();
      }else {
        return (
          <View style={{alignItems: 'center', justifyContent:'center',height:40,width:w,backgroundColor:'#eee'}}>
            <Text allowFontScaling={false} style={{color: '#000', fontSize: 12}}>没有更多数据了...</Text>
          </View>
        );
      }
    } else {
      if(this.props.renderLoadMore){
          return this.props.renderLoadMore();
      }else {
        return (
          <View style={{alignItems: 'center', justifyContent:'center',height:40,width:w,backgroundColor:'#eee',flexDirection:'row'}}>
            <ActivityIndicator animating={this.state.first?true:this.state.isLoadding} color='#333' size='small' style={{marginRight:7}}/>
            <Text allowFontScaling={false} style={{color: '#000', fontSize: 12,}}>{this.state.first?'正在加载中,请稍等':this.state.isLoadding?'正在加载中,请稍等':'上拉加载更多'}...</Text>
          </View>
        );
      }
    }
  };
 
  //更新状态机
  updateData=(res,len,loadMore=false)=>{
    let dataArr=[];
    let {pageLen,allLen}=this.props;
    if(loadMore){
      for(let i=0;i<len;i++){
        this.state.dataArr.push(res[i]);
      }
    }else {
      this.state.dataArr=res;
    }
    !!this.props.dealWithDataArrCallBack?(dataArr=this.props.dealWithDataArrCallBack(this.state.dataArr)):dataArr=this.state.dataArr;
    this.setState({
      dataArr:dataArr,
      dataSource:this.props.isListView?this.state.dataSource.cloneWithRows(dataArr):dataArr,
      canLoad:allLen?(allLen>this.state.dataArr):(pageLen?(len===pageLen):false),
    });
  };
 
  //如果在进行某个操作后需要对数组数据进行手动处理的话,调用该方法(通过ref来调用refs={(r)=>{!this.PL&&(this.PL=r)}})
  changeDataArr=(callBack)=>{
    let arr=JSON.parse(JSON.stringify(this.state.dataArr));
    let dataArr=callBack(arr);
    this.setState({
      dataArr:dataArr,
      dataSource:this.props.isListView?this.state.dataSource.cloneWithRows(dataArr):dataArr,
    });
  };
 
  //ListView/FlatList滚动时的方法
  onScroll=(e)=>{
    this.lastListY=e.nativeEvent.contentOffset.y;
    this.lastListY<=0&&this.setState({scrollEnabled:false})
  };
  //开始移动时判断是否设置当前的View为手势响应者
  onMoveShouldSetPanResponder=(e,gesture)=> {
    if(!this.props.pageLen)return false;
    let {dy}=gesture;
    let bool;
    if(dy<0){//向上滑
      if(this.state.pullState!=='noPull'){
        this.resetAni();
      }
      !this.state.scrollEnabled&&this.setState({scrollEnabled:true});
      bool=false;
    }else {//向下拉
      if(this.state.pullState!=='noPull'){
        bool=true;
      }else {
        bool=!this.state.scrollEnabled||this.lastListY<1;
      }
    }
    return bool;
  };
 
  //手势响应者的View移动时
  onPanResponderMove=(e,gesture)=>{
    this.dealWithPan(e,gesture);
  };
  dealWithPan=(e,gesture)=>{
    let {dy}=gesture;
    if(dy<0){//向上滑
      if(this.state.pullState!=='noPull'){
        this.resetAni();
      }else {
        !this.state.scrollEnabled&&this.setState({scrollEnabled:true})
      }
    }else {//向下拉
      let pullDis=gesture.dy/2;
      let pullOkH=this.pullOkH;
      let aniY=pullDis-this.props.renderRefreshViewH;
      this.state.pullAni.setValue(aniY);
      if(pullDis>pullOkH){
        this.setState({pullState:'pullOk'})
      }else if(pullDis>0){
        this.setState({pullState:'pulling'})
      }
    }
  };
 
  //手势响应者被释放时
  onPanResponderRelease=(e,gesture)=>{
    switch (this.state.pullState){
      case 'pulling':
        this.resetAni();
        this.setState({scrollEnabled:true});
        break;
      case 'pullOk':
        this.resetAniTop();
        this.setState({pullState:'pullRelease',scrollEnabled:true});
        this.refresh();
        break;
    }
  };
 
  //重置位置 refreshView刚好隐藏的位置
  resetAni=()=>{
    this.setState({pullState:'noPull'});
    // this.state.pullAni.setValue(this.defaultXY);
    this.resetList();
    Animated.timing(this.state.pullAni, {
      toValue: -this.props.renderRefreshViewH,
      // toValue: this.defaultXY,
      easing: Easing.linear,
      duration: defaultDuration/2
    }).start();
  };
 
  //重置位置 refreshView刚好显示的位置
  resetAniTop=()=>{
    this.resetList();
    Animated.timing(this.state.pullAni, {
      toValue: 0,
      // toValue: {x:0,y:0},
      easing: Easing.linear,
      duration: defaultDuration/2
    }).start();
  };
  //重置ListView/FlatList位置
  resetList=()=>{
    this.list&&(this.props.isListView?this.list.scrollTo({y:0}):this.list.scrollToOffset({offset:0}));
  };
  //滚动ListView/FlatList位置
  scrollList=(y)=>{
    this.list&&(this.props.isListView?this.list.scrollTo({y:y}):this.list.scrollToOffset({offset:y}));
  };
 
  //渲染默认的下拉刷新View
  renderRefreshView=()=>{
    return(
      <View style={{height:60,width:w,justifyContent:'center',alignItems:'center',backgroundColor:'#eee',flexDirection:'row'}}>
        <ActivityIndicator animating={this.state.pullState==='pullRelease'} color='#333' size='small' style={{marginRight:7}}/>
        <Text allowFontScaling={false} style={{color:'#333',fontSize:15}}>{pullStateTextArr[this.state.pullState]}</Text>
      </View>
    );
  };
}

2·使用

引入   import PageListView from './PageListView'

方法：

 // 20180730 刷新
 async _refresh(callBack){
    const histo = await historys("?form.tree_node_operation="+0);
     console.log(this.state.userId,"this.state.userId")
    const datas = "?form.userId="+histo.form.userId+"&pageSize=10&curPage=0";
    const result = await awaitdeteal(datas);
    console.log(result.form.dataList,"1111111111111111")
    callBack(result.form.dataList.reverse());
           if(result&&result.form.dataList.length>0){
          this.setState({
              result:this.state.result.concat(result.form.dataList),//序列化：转换为一个 (字符串)JSON字符串
          });
         }
   
  }
   
  // 20180730 加载更多
  async _loadMore(page,callBack){
    const histo = await historys("?form.tree_node_operation="+0);
     console.log(this.state.userId,"this.state.userId")
    const datas = "?form.userId="+histo.form.userId+"&pageSize=10&curPage="+page;
    const result = await awaitdeteal(datas);
    console.log(result.form.dataList,"222222222222222222")
    callBack(result.form.dataList);
           if(result&&result.form.dataList.length>0){
          this.setState({
              result:this.state.result.concat(result.form.dataList),//序列化：转换为一个 (字符串)JSON字符串
          });
        }
  }
   
  // 20180730 子组件渲染
  _renderRow(itemdata) {
    // <CommentItem row={itemdata} />

下面这个是子组件的例子
    return (
      <View 
            onPress={()=>this.gotoItem(itemdata)}
            style={{marginTop:5,paddingBottom:10,paddingTop:10,width:"90%",marginLeft:20,height:220}}>
        <Text style={{color:"#000000"}}>两票类型：{itemdata.tickettypename}</Text>
        <Text style={{color:"#000000"}}>负责人：{itemdata.headuser}</Text>
        <Text style={{color:"#000000"}}>编号：{itemdata.ticketserialnum}</Text>
        <Text style={{color:"#000000"}}>流转人：{itemdata.manageuser}</Text>
        <View><Text style={{color:"#000000"}}>内容：</Text></View>
        <Text numberOfLines={10} style = {{paddingBottom:15,borderColor:"#eeeeee",borderWidth:1,borderStyle:"solid",color:"#000000"}}>{itemdata.content}</Text>
        <Text style={{color:"#000000"}}>等待时间：{itemdata.manageTime}</Text>
        <Text style={{color:"#000000"}}>流转时间：{itemdata.lastTime}</Text>
    </View>
    )
  }

3具体使用

render() {
      let height = this.state.result.length * 100;
    return (
      <View style={{flex:1}}>
        {/* 需要循环获取数据 */}
            <PageListView
                height={height}
                pageLen={15}  //定义获取数据的长度，当获取的长度小于这个时，显示没有更多数据
                renderRow={this._renderRow.bind(this)}
                refresh={this._refresh.bind(this)}
                loadMore={this._loadMore.bind(this)}
            />
      </View>
    );
  }

猜你喜欢

转载自blog.csdn.net/qq_39197547/article/details/83892411
今日推荐
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
【转】spring中对控制反转和依赖注入的理解
tms webcore 安装和使用
java程序员进阶相关书籍
SpringMVC接受请求参数、
如何保存训练好的机器学习模型
MyEclipse、Eclipse设置项目JDK的三个地方
商超行业微信小程序开发定制一般多少钱 （行业技术人员解读）
Markdown编辑器语言——30分钟入门到到精通
Linux系统下MongoDB的简单安装与基本操作
Power Strings
每日归档
更多
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022