基于react native FlatList 封装的CustomFlatList

420 阅读1分钟

1、设计思路:

  1. 能够处理分页和不分页情况;
  2. 组件自身完成网路请求,外部只需调用渲染数据即可;
  3. 可传递api请求的额外参数
  4. 组件自身能够处理:获取服务数据时显示加载中;获取数据后渲染数据;数据为空显示空页面;服务网路不通显示网路错误;可进行下拉刷新;分页时:上拉加载下一页数据,

2、希望调用方式:

  • 分页:
    <CustomFlatList
      api="discountOrder/pagingList"
      data={data}
      isPage={true}
      renderItem={this._renderItem}
    />
  • 不分页:
    <CustomFlatList
     api="goods/goodsList"
     data={data}
     renderItem={this._renderItem}
    />
    
    _renderItem=({item,index})=>{
      return(
         <View></View>	
       )
    }
  • 参数说明:
  1. api :网络请求api,必传
  2. data:网络请求额外参数,非必传
  3. renderItem:渲染数据,必传
  4. 需要分页时 isPage传true,无需分页时可不传

3、展示:

ivy93-9pvqj.gif

4、代码实现:

https://gitee.com/yilianxinjue/custom-flat-list.git