登录
当前位置： 首页 > 工具软件 > react-native-refresh-list-view > 使用案例 >

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

洪季萌
2023-12-01

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>
    );
  }

 

 类似资料：

相关阅读

XListView实现下拉刷新和上拉加载原理解析微信小程序实现列表下拉刷新上拉加载H5基于iScroll实现下拉刷新和上拉加载更多Android ListView实现上拉加载更多和下拉刷新功能Android自定义下拉刷新控件RefreshableView

相关文章

货拉拉实习一面（1h35min）货拉拉java实习二面货拉拉 java实习二面货拉拉 前端实习 一面货拉拉实习一面面经

相关问答

前端 - 想要做el-table 表格的下拉刷新,怎么实现?自定义分类法-限制父下拉深度引导类下拉菜单右下拉菜单不适用于自定义子菜单如何在ajax加载不同内容后刷新Select2下拉菜单？react自定义下拉组件中未显示道具

相关文档

如何实现自己的 jQueryRedis 设计与实现Python 自动化测试之实操常用算法实现方法机器学习算法 Python 实现
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.