在安卓原生開發中，ListView是很常用的一個列表控制元件，那麼React Native（RN）如何實現該功能呢，這裡簡單的講解下。

       ListView.js原始碼截圖：

      從原始碼中可知RN中的ListView是基於ScrollView擴充套件得來的，所以具有ScrollView的相關屬性。

      常用的屬性：

dataSource：資料來源，類似於安卓中我們傳入BaseAdapter的資料集合。

      renderRow：渲染某一行，類似於BaseAdapter中的getItem方法。

      onEndReached：

      onEndReachedThreshold：呼叫onEndReached之前的臨界值，單位是畫素。（預設值為1000）感覺這個1000設定很好，先如今使用者不差流量，所以將體驗做到最佳才是上上之策。

      refreshControl：ScrollView提供下拉重新整理功能。(該屬性是繼承與ScrollView)

renderHeader：渲染頭部View，類似於安卓ListView中的addHeader.

     以上的屬性基本可以解決一些常見的列表需求，如果我們想要實現網格的效果，也可以藉助該元件來實現，有點類似於安卓中的RecyclerView控制元件。

pageSize:渲染的網格數，類似於安卓GridView中的numColumns.

       contentContainerStyle:該屬性是繼承於ScrollView，主要作用於該元件的內容容器上。

     想要實現網格效果：需要執行下面三步驟：

1.配置pageSize確認網格數量：

<ListView
      automaticallyAdjustContentInsets={false}
      contentContainerStyle={styles.grid}
      dataSource={this.state.dataSource}
      renderRow={this.renderRow.bind(this)}
      pageSize={3}
      refreshControl={
         <RefreshControl
           onRefresh={this.onRefresh.bind(this)}
           refreshing={this.state.isLoading}
           colors={['#ff0000', '#00ff00', '#0000ff']}
           enabled={true}
           />
       }
      />
 

2.設定每一個網格的寬度樣式：

 itemLayout:{
    flex:1,
    width:Util.size.width/3,
    height:Util.size.width/3,
    alignItems:'center',
    justifyContent:'center',
    borderWidth: Util.pixel,
    borderColor: '#eaeaea'
  },

3.設定contentContainerStyle相應屬性：

 grid: {
    justifyContent: 'space-around',
    flexDirection: 'row',
    flexWrap: 'wrap'
  },

wrap：空間不足的情況下自動換行，nowrap:空間不足，壓縮容器，不會自動換行；

效果圖：

在使用ListView中遇到了一些問題，如果有知道的還請告知下，謝謝~

1.ListView在使用onEndReached分頁載入時候，滑動過快滾動條會出現抖動效果，在安卓裝置上如果滑動過快有時候會出現滾動回退顯現，體驗上相當不友好。

2.在使用ListView製作網格效果的時候，如果個數不是pagesize的倍數，那麼UI顯示有問題，（如下圖）我想肯定是配置的問題，但是沒有找到相應的配置，這裡暫時記一下，如有知道的朋友告知下~，臨時解決方案：比較笨拙，追加空View，填充成整數倍的pagesize。