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，如需轉載請自行聯系原作者