React Native之ListView的讲解与应用

          在安卓原生开发中，ListView是很常用的一个列表控件，那么React Native（RN）如何实现该功能呢，这里简单的讲解下。

       ListView.js源码截图：

       

      从源码中可知RN中的ListView是基于ScrollView扩展得来的，所以具有ScrollView的相关属性。

      常用的属性：

      dataSource：数据源，类似于安卓中我们传入BaseAdapter的数据集合。

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

      onEndReached：简单说就是用于分页操作，在安卓中原生开发中，我们需要自己实现相应的方法。

      onEndReachedThreshold：调用onEndReached之前的临界值，单位是像素。（默认值为1000）感觉这个1000设置很好，先如今用户不差流量，所以将体验做到最佳才是上上之策。 

      refreshControl：指定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'
  },

这里简单描述下flexWrap属性：wrap、nowrap

wrap：空间不足的情况下自动换行，nowrap:空间不足，压缩容器，不会自动换行；

效果图：

       

在使用ListView中遇到了一些问题，如果有知道的还请告知下，谢谢~

1.ListView在使用onEndReached分页加载时候，滑动过快滚动条会出现抖动效果，在安卓设备上如果滑动过快有时候会出现滚动回退显现，体验上相当不友好。

2.在使用ListView制作网格效果的时候，如果个数不是pagesize的倍数，那么UI显示有问题，（如下图）我想肯定是配置的问题，但是没有找到相应的配置，这里暂时记一下，如有知道的朋友告知下~，临时解决方案：比较笨拙，追加空View，填充成整数倍的pagesize。