ReactNative ListView + 上拉加载更多 + 下拉刷新

最近在尝试RN上的一些编码，感受是编译环境真的很不稳定，有时候添加一个依赖包,直接就导致项目出错了，需要移除重新添加。提醒大家添加依赖组件的时候最好把服务停了，项目停止运行以保证稳定性。
本来用的是FlatList组件，这个新组建用起来简单很多，但是加上逻辑代码会触发很多遍下拉刷新方法，目前没有很好的解决思路，所以换成了老组件ListView，差异不大。

 //1、首先定义换成列表数组信息、当前页码信息的集合
let cacheResults={
  pageIndex:1,
  pageSize:10,
  items:[]
}
//2、定义状态机
  constructor(props) {
    super(props)
    this.state = {
      // data: [],
      data:new ListView.DataSource({
        rowHasChanged:(r1,r2)=>r1!==r2,
      }),
      isFirstLoad: true, //是否是第一次加载，这里为了防止上拉加载更多方法多次触发
      isRefreshing: false, //当前刷新状态
      isLoadingTail: false, //尾部刷新
      isNoMoreData: false, //是否还有数据
    }
  }

 //3、渲染界面
   render() {
    return (
        <View style={styles.container}>
            <ListView
                dataSource={this.state.data}
                renderRow={(rowData) => this.renderRow(rowData)}
                onEndReached={this._loadMoreData}
                onEndReachedThreshold={20}
                renderFooter={this._renderFooter}

                refreshControl={
                    <RefreshControl
                        refreshing={this.state.isRefreshing}
                        onRefresh={this._onRefresh}
                    />
                }
            />

        </View>
    );
}
//4、第一次页码加载完成调用
  componentDidMount() {
    console.log('componentDidMount')
    //发送网络请求
    // this.loadMockData()
    cacheResults.items = []
    cacheResults.nextPage = 1

    this.loadActualData(1)

  }
 //5、下拉刷新
  _onRefresh= () => {

    if(this.state.isRefreshing) {
      return
    }
    cacheResults.nextPage = 1
    this.loadActualData(1)
  }
 //6、上拉加载更多
   _loadMoreData= () => {
    if(this.state.isFirstLoad) { //第一次进来会走一次，这次不触发事件
      this.setState({
        isFirstLoad:false
      });
      return
    }

    if(this.state.isNoMoreData || this.state.isLoadingTail) {//防止多次调用
      return
    }
    cacheResults.nextPage += 1
    let pageIndex = cacheResults.nextPage
    console.log('_loadMoreData'+cacheResults.nextPage)
    this.loadActualData(pageIndex)
  }
 //7、加载数据、处理上拉下拉判断逻辑，这块有开发经验的可以自己写，主要提供思路
 loadActualData(pageIndex) {
    console.log('loadActualData:' + pageIndex)
    if(pageIndex !== 1) {//加载更多
      this.setState({
        isLoadingTail:true
      });
    }else {
      this.setState({
        isRefreshing:true
      })
    }

    let liveStatus = this.state.liveStatus;
    // console.log('liveStatus:'+liveStatus)
    let map = {
      "_from": "yjk", 
      "appId": "101", 
      "pageIndex":pageIndex, 
    }
    let url = config.actualListApi.base + config.actualListApi.subUrl
    request.post(url,map).then((response) => {
    //这边是封装的网络请求方法，自己写代替
      // console.log('response.code'+response.code)
      // console.log('response.msg'+response.msg)
      // console.log('网络请求结果'+JSON.stringify(response.data))
      if (response.code === 200) {//网络请求成功
        let list = response.data.list
        let items = cacheResults.items.slice()
        if(pageIndex !== 1) {
          items = items.concat(list)
        }else {
          items = list
        }

        //保存数据
        cacheResults.items = items
        console.log('当前到了第:'+cacheResults.items.length+'个!');

        // 默认每十条为一页，不足十条，则说明没有更多数据
        if(list.length < 10) {
          console.log('<10');
          this.setState({
            isNoMoreData: true
          });
        }else {
          console.log('>=10');
          this.setState({
            isNoMoreData: false
          });
        }
          if(pageIndex !== 1) {//加载更多
            this.setState({
              // data: cacheResults.items,
              data:this.state.data.cloneWithRows(
                cacheResults.items
              ),
              isLoadingTail:false
            });
          }else{//加载新数据
            this.setState({
              data:this.state.data.cloneWithRows(
                cacheResults.items
              ),
              isRefreshing:false
            });
          }
      } 
    }).catch((error) => { //如果出错
      console.log('网络请求出错'+error);
      if(pageIndex !== 1) {
        this.setState({
          isLoadingTail:false
        });
      }else {
        this.setState({
          isRefreshing:false
        });
      }
    })
  }
 //这边是UI界面绘制
   // cell
  renderRow(item) {
    return (
      <StreamCell rowData={item}/>
    )
  }
//顶部用得是自带的菊花，不需要特地去重写
//自定义Footer视图
  _renderFooter = ()=>{
    if(this.state.isNoMoreData){
        return(
            <View style={styles.loadingMore}>
                <Text style={styles.loadingText}>没有更多数据啦...</Text>
            </View>
        );
    }

    //显示一朵小菊花!!
    return(
        <ActivityIndicator
            style={styles.loadingMore}
        />
    )
}

ReactNative ListView + 上拉加载更多 + 下拉刷新

猜你喜欢