React-Native中处理ListView上拉加载更多 - 简书
下载简书移动应用
写了13044字，被69人关注，获得了80个喜欢
React-Native中处理ListView上拉加载更多
RN-ListViewLoadMorereact-native中处理ListView的下拉刷新和上拉加载更多
ReactNative(RN)中的ListView是一个非常常用的组件，RN中已经有了现成的RefreshControl，官方文档中有具体用法，这里主要记录一下我是如何做上拉加载更多的示例中的数据来源于阿里巴巴网站
/products/tool_boxes/2.html?XPJAX=1
/products/tool_boxes/3.html?XPJAX=1
/products/tool_boxes/4.html?XPJAX=1
因为没有涉及原生部分代码，且RN组件也是通用的，所以理论上是兼容iOS和Android的
目录结构如图：
的对这个结构肯定不陌生，为了尽可能的简单，工程中只保留了单个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.
//ListView滚动到底部，根据是否正在加载更多 是否正在刷新 是否已加载全部来判断是否执行加载更多
if (reducer.isLoadingMore || reducer.products.length &= reducer.totalProductCount || reducer.isRefreshing) {
InteractionManager.runAfterInteractions(() =& {
console.log("触发加载更多 toEnd() --& ");
this._loadMoreData();
_loadMoreData() {
const { reducer, dispatch } = this.
dispatch(changeProductListLoadingMore(true));
_pageNo = Number.parseInt(reducer.products.length / _pageSize) + 1;
dispatch(getProductList(_pageNo));
_renderFooter() {
const { reducer } = this.
//通过当前product数量和刷新状态（是否正在下拉刷新）来判断footer的显示
if (reducer.products.length & 1 || reducer.isRefreshing) {
return null
if (reducer.products.length & reducer.totalProductCount) {
//还有更多，默认显示‘正在加载更多...’
return &LoadMoreFooter /&
// 加载全部
return &LoadMoreFooter isLoadAll={true}/&
render() {
const { reducer } = this.
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) =& r1 !== r2});
&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';
StyleSheet,
} from 'react-native';
class LoadMoreFooter extends Component {
constructor(props) {
super(props);
render() {
&View style={styles.footer}&
&Text style={styles.footerTitle}&{this.props.isLoadAll ? '已加载全部' : '正在加载更多……'}&/Text&
const styles = StyleSheet.create({
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
height: 40,
footerTitle: {
marginLeft: 10,
fontSize: 15,
color: 'gray'
export default LoadMoreFooter
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮
被以下专题收入，发现更多相似内容：
如果你是程序员，或者有一颗喜欢写程序的心，喜欢分享技术干货、项目经验、程序员日常囧事等等，欢迎投稿《程序员》专题。
专题主编：小...
· 190695人关注
玩转简书的第一步，从这个专题开始。
想上首页热门榜么？好内容想被更多人看到么？来投稿吧！如果被拒也不要灰心哦～入选文章会进一个队...
· 135282人关注
React Native开发
· 1249人关注
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
选择支付方式：react native 中listView怎么在滚动条滚动到底部的时候加载更多_百度知道React Native 性能优化建议 - 推酷
React Native 性能优化建议
1. 异步逐层渲染。
React Native 虽然一直标榜媲美Native的体验，但实际使用下来，其渲染性还是非常低效，基于ScrollView和ListView两大容器，在渲染上，相当于web端的table布局，需要等整个大table渲染完成才显示页面，也就是说，当容器内有大量的子元素，其白屏时间会非常长。
如何让React Native做到像web端边渲染边加载？可以采用异步渲染的方式，使用requestAnimationFrame 或 setTimeout 定时将单个组件push进ScrollView容器。
基于这个原理，写了个逐层渲染的组件：
2. 实现shouldComponentUpdate方法
如上第一点，逐层渲染提升打开时间，但是也会导致component重复渲染，也就是执行了大量无用的diff算法。虽然React里引以为傲的diff算法非常高效，但是执行数量达到一定程度后，也会带来非常大的影响。那么可使用
shouldComponentUpdate
来控制component的渲染次数。
如果确定该组件渲染完后无需再次更新，即这个组件是一个静态组件，那么可以直接return false。
shouldComponentUpdate(){
return false
如果组件比较复杂，自己对RN的更新机制不太熟，可以直接Minxi一下React提供的
PureRenderMixin
mixins: [React.addons.PureRenderMixin]
手动实现或使用第三方组件库，比如
说白了，就是要确定组件内的不可变数据，让其不再执行diff及render。
3. 使用setNativeProps方法
setNativeProps
方法可以理解为web的直接修改dom。使用该方法修改
RN自带的组件
，则不会触发组件的
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
等组件生命周期中的方法。
建议频繁更新的操作，如slider、tabs切换等拖曳操作时，使用
setNativeProps
来更新属性，会获得意想不到的性能体验。
代码片段：
me.refs.tabView.setNativeProps({
height : 0,
opacity : 0
性能分析工具：
4. 不要使用阴影效果
React Native 里面的
相关的样式，是非常耗性能的css属性。这在web上，以前android 2.0年代，也是一样耗性能的css属性之一。如果需要使用阴影效果，建议使用图片来代替反而性能更好一些。
5. 最小化DOM
React Native里虚拟dom结构越复杂，则越低效。感觉RN的渲染性能，和以前android2.x时代没多大区别，如果层级结构大于5级，则要考虑下优化了。这没啥技巧，纯靠经验及硬实力。
6.组件粒度化
如何更好的划分组件粒度，这需要合理的对组件进行更细粒度的划分，区分出静态组件及动态组件。
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致ReactNative
View嵌套ScrollView时，ScrollView不能滚动。
View嵌套ListView时，ListView不能滚动。
react native scrollview inside View doesn't scroll.
react native ListVIew inside View doesn't scroll.
解决方案：
render(){return(中的根节点往往是View，而其内嵌套一个ScrollView发现无法滚动，此时检查根节点View的style必须要有flex: 1,这个样式。
每层的Component都实现响应返回键事件，导致连续响应。
解决方案：
如果当前页是第二页，那么通过navigator.getCurrentRoutes().length & 2判断，如果true则，return false。即不拦截。因为当前是第二页，所以length是不会超过2的。但第三页不是执行了navigator.pop()了吗，所以第三页返回后，navigator.getCurrentRoutes().length 应该等于 2，但事实不是这样。事实navigator.getCurrentRoutes().length 还是等于3.
Navigator中route是个什么对象？
Navigator是一个数组，所以会有添加数组元素的push()方法，移除数组最后元素的pop()方法，复制数组的slice()方法，返回元素索引的indexOf('name')方法，
而，所谓的route对象就是Navigator的元素，其实是一个JSON对象。
也就是：navigator = [ {name : 'andy', age : 12}, {name : 'david', age : 13} ]
所以route是一个JSON对象，内部字段遵从JSON规范，所以并不需要一定要有name字段，或者一定要有index字段，这些字段都是自己定义的字段。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：14757次
排名：千里之外
原创：71篇
转载：25篇& & listView.setOnScrollListener(new OnScrollListener() {& & @Override& & public void onScrollStateChanged(AbsListView view, int scrollState) {& & // 当不滚动时& & if (scrollState == OnScrollListener.SCROLL_STATE_IDLE) {& & //判断是否滚动到底部& & if (view.getLastVisiblePosition() == view.getCount() - 1) {& & adapter.count += 10;& & adapter.notifyDataSetChanged();& & int currentPage=adapter.count/10;& & Toast.makeText(getApplicationContext(), "第"+currentPage+"页", Toast.LENGTH_LONG).show();& & }& & }& & }& & @Override& & public void onScroll(AbsListView view, int firstVisibleItem,& & int visibleItemCount, int totalItemCount) {& & // TODO Auto-generated method stub& & }& & });
声明：该文章系网友上传分享，此内容仅代表网友个人经验或观点，不代表本网站立场和观点；若未进行原创声明，则表明该文章系转载自互联网；若该文章内容涉嫌侵权，请及时向
上一篇：下一篇：
相关经验教程
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
论文写作技巧