React-Native中处理ListView上拉加载更多

来源：互联网发布：狗带什么意思网络语言编辑：程序博客网时间：2024/05/17 23:12

RN-ListViewLoadMore
react-native中处理ListView的下拉刷新和上拉加载更多

ReactNative(RN)中的ListView是一个非常常用的组件，RN中已经有了现成的RefreshControl，官方文档中有具体用法，这里主要记录一下我是如何做上拉加载更多的
示例中的数据来源于阿里巴巴网站

https://m.alibaba.com/products/tool_boxes/2.html?XPJAX=1https://m.alibaba.com/products/tool_boxes/3.html?XPJAX=1https://m.alibaba.com/products/tool_boxes/4.html?XPJAX=1

因为没有涉及原生部分代码，且RN组件也是通用的，所以理论上是兼容iOS和Android的

工程源码在这里(https://github.com/yongqianvip/RN-ListViewLoadMore)

目录结构如图：

tree

熟悉Redux(Redux中文文档) 的对这个结构肯定不陌生，为了尽可能的简单，工程中只保留了单个Action(product.js)和单个Reducer(rootReducer.js)

一定要把控好各种状态
不管是下拉刷新，还是加载更多，都要有一个对应的状态来控制，以便于加锁，防止重复操作
如果isLoadingMore为true，不能再响应LoadMoreData方法
LoadMoreData结束（成功或失败）后将isLoadingMore置为false

关键方法 onEndReached

ListView在滚动到最后一个Cell的时候，会触发onEndReached方法，就是从这个方法入手，在ProductList.js中，

  let _pageNo = 2;  const _pageSize = 30;  export defaultclass ProductList extends Component {      ...      _toEnd() {          const { reducer } = this.props;          //ListView滚动到底部，根据是否正在加载更多 是否正在刷新 是否已加载全部来判断是否执行加载更多          if (reducer.isLoadingMore || reducer.products.length >= reducer.totalProductCount || reducer.isRefreshing) {              return;          };          InteractionManager.runAfterInteractions(() => {              console.log("触发加载更多 toEnd() --> ");              this._loadMoreData();          });      }      _loadMoreData() {          const { reducer, dispatch } = this.props;          dispatch(changeProductListLoadingMore(true));          _pageNo = Number.parseInt(reducer.products.length / _pageSize) + 1;          dispatch(getProductList(_pageNo));      }      _renderFooter() {          const { reducer } = this.props;          //通过当前product数量和刷新状态（是否正在下拉刷新）来判断footer的显示          if (reducer.products.length < 1 || reducer.isRefreshing) {              return null          };          if (reducer.products.length < reducer.totalProductCount) {              //还有更多，默认显示‘正在加载更多...’              return <LoadMoreFooter />          }else{              // 加载全部              return <LoadMoreFooter isLoadAll={true}/>          }      }      render() {          const { reducer } = this.props;          const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});          return (              <ListView style={ styles.listViewContent }                   dataSource={ ds.cloneWithRows(reducer.products) }                   renderRow={ this._renderRow.bind(this) }                  onEndReached={ this._toEnd.bind(this) }                  onEndReachedThreshold={10}                  renderFooter={ this._renderFooter.bind(this) }                  enableEmptySections={true}                   refreshControl={                      <RefreshControl                          refreshing={ reducer.isRefreshing }                          onRefresh={ this._onRefresh.bind(this) }                          tintColor="gray"                          colors={['#ff0000', '#00ff00', '#0000ff']}                          progressBackgroundColor="gray"/>                      }/>          )      }      ...  }

加载更多组件LoadMoreFooter

  import React, { Component } from 'react';  import {      View,      Text,      StyleSheet,  } from 'react-native';  class LoadMoreFooter extends Component {      constructor(props) {          super(props);      }      render() {          return (              <View style={styles.footer}>                  <Text style={styles.footerTitle}>{this.props.isLoadAll ? '已加载全部' : '正在加载更多……'}</Text>              </View>          )      }  }  const styles = StyleSheet.create({      footer: {          flexDirection: 'row',          justifyContent: 'center',          alignItems: 'center',          height: 40,      },      footerTitle: {          marginLeft: 10,          fontSize: 15,          color: 'gray'      }  })  export default LoadMoreFooter

0 0