React Native填坑之旅--ListView篇

列表显示数据，基本什么应用都是必须。今天就来从浅到深的看看React Native的ListView怎么使用。笔者写作的时候RN版本是0.34。

引入所需要的内置组件之类的就不多说了。

第一步，在<code>constructor</code>里设置数据源，并同时指定什么时候重新绘制一行，就是在这个时候<code>(r1, r2) =&gt; r1 !== r2}</code>重绘。

之后，在state里面设置数据源。下面从网络请求数据的时候state的作用就更加明显了。RN的组件在state发生改变的时候就会重绘。这个下面会详细解释。

最后，在<code>render</code>方法里返回ListView，这里的props里有一个<code>renderRow</code>。在这里指定的代码就是把数据源中每一行的数据绘制在<code>Text</code>里。

下面就把绘制行的部分抽象出来。在Native应用的开发中，无论是iOS还是Android，行绘制的部分都是单独出来的。在RN里虽然可以不独立出来，但是你也看到了，这样的写法遇到稍微复杂一点的行内容的时候就捉襟见肘了。不独立出来行绘制部分代码会很难维护。

这部分不复杂，独立出来以后是这样的：

这个例子和上例基本上一样。只是多了一个<code>_renderRow(rowData)</code>方法。

注意：在使用这个方法以前，一定要绑定：<code>this._renderRow = this._renderRow.bind(this);</code>。绑定也可以这样<code>&lt;ListView dataSource={this.state.dataSource} renderRow={this._renderRow.bind(this)} /&gt;</code>。

在绘制行的时候，比之前稍微有一点改动。行文本的外面套了一个View，并指定这个View的高度为50。

从现在来看，数据只有两行。如果不滑动一下的话，看起来和两个上下排列的Text没有什么区别。

首先我们加一个分割线：

如果你从一开始就没打算跟flow扯上任何关系，那么就按照ES标准写就好。

至于分割线也是非常简单。我们这就返回了一个高度一个像素的，背景色为黑色的view。

Row的点击不想Native那样，默认的一般就有了。在RN里，我们需要手动赋予一行可以被点击的功能。

在RN里处理一般点击的不二选择就是<code>TouchableHighlight</code>。在<code>TouchableHighlight</code>里的<code>onPress</code>里调用自定义的_pressRow方法处理点击，<code>highlightRow</code>方法高亮行。

当然，这里就少不了用到样式了：

在实际的开发中，一般没有人会把Row（或者行）的绘制和<code>ListView</code>放在一起。我们这里就演示如何把Row的绘制分离出去。

首先创建一个单独的文件，定义Cell：

Row也是一个组件，是一个组件就可以在另外的组建里渲染。所以，单独定义的Row就是这么用的。

回到demoList.js文件。在<code>_renderRow</code>方法中修改代码：

以上就是处理ListView和其中的Cell的一些常见问题的方法。

欢迎加群互相学习，共同进步。QQ群：iOS: 58099570 | Android: 572064792 | Nodejs：329118122 做人要厚道，转载请注明出处！

本文转自张昺华-sky博客园博客，原文链接：http://www.cnblogs.com/sunshine-anycall/p/5932284.html，如需转载请自行联系原作者