React Native之ListView组件

一、前言

        ListView组件是React Native中一个比较核心的组件，用途非常的广；该组件设计用来高效的展示处置滚动的数据列表：
        1.1 首先创建一个ListView.Data.Source数据源，然后给它传递一个普通的数据数组；
        1.2 使用数据源(data source)实例化一个ListView组件，定义一个renderRow回调函数，这个函数会接受数组中的每一个数据作为参数，并返回一个可渲染的组件(就是列表的每一行的item)

var GListViewDemo = React.createClss({
    //设置初始值
    getInitialState(){
          //设置数据源
          var ds = new ListView.DataSource({rowHasChanged: (r1, r2) =>r1 !== r2});
          //设置返回数据
          return{
            dataSource: ds.cloneWithRows(Wine)
        }
    },
    //设置render函数
    render(){
        return(
            <ListView 
            dataSource={this.state.dataSource}   //数据源
            renderRow={this.renderRow}
        )
    }
})
//返回具体的cell
renderRow(rowData,sectionID,rowID,highlightRow){
    return(
        <TouchableOpacity activeOpacity={0.5} onPress{()=>{AlertIOS.alert('点击了'+rowID+'行')}}
        <View style={styles.cellViewStyle}>
        {/*左边的图片*/}
        <Image source={{uri: rowData.image}} style={styles.leftImageStyle}/>
        )
}

二、ListView常用的属性

        ScrollView     相关属性样式全部继承

        dataSource     ListViewDataSource 设置ListView的数据源

        initialListSize    number
        设置ListView组件刚刚加载的时候渲染的列表行数，用这个属性确定首屏或者首页加载的数量，而不是花大量的时间渲染加载很多页面数据，提高性能。

        onChangeVisibleRows
         function (visibleRows,changedRows)=>void。当可见的行发生变化的时候回调该方法。

        onEndReachedThreshold     number
        当偏移量达到设置的临界值调用onEndReached

        onEndReached     function
        当所有的数据项行被渲染之后,并且列表往下进行滚动。一直滚动到距离底部onEndReachedThredshold设置的值进行回调该方法。原生的滚动事件进行传递(通过参数的形式)。

        pageSize     number
        每一次事件的循环渲染的行数

        removeClippedSubviews     bool
        该属性用于提供大数据列表的滚动性能。该使用的时候需要给每一行(row)的布局添加over:’hidden’样式。该属性默认是开启状态

        renderFooter     function 方法 ()=>renderable
        在每次渲染过程中头和尾总会重新进行渲染。如果发现该重新绘制的性能开销比较大的时候，可以使用StaticContainer容器或者其他合适的组件。

        renderHeader     function方法
        在每一次渲染过程中Footer(尾)该会一直在列表的底部，header(头)该会一直在列表的头部，用法同上。

        renderRow    function
        (rowData,sectionID,rowID,highlightRow)=>renderable
        该方法有四个参数，其中分别为数据源中一条数据，分组的ID，行的ID，以及标记是否是高亮选中的状态信息。

        renderScrollComponent     function
        方法 (props)=>renderable 该方法可以返回一个可以滚动的组件。默认该会返回一个ScrollView

        renderSectionHeader
        function (sectionData,sectionID)=>renderable
        如果设置了该方法，这样会为每一个section渲染一个粘性的header视图。该视图粘性的效果是当刚刚被渲染开始的时候，该会处于对应的内容的顶部，然后开始滑动的时候，该会跑到屏幕的顶端。直到滑动到下一个section的header(头)视图，然后被替代为止。

        renderSeparator
       function (sectionID,rowID,adjacentRowHighlighted)=>renderable
        如果设置该方法，会在被每一行的下面渲染一个组件作为分隔。除了每一个section分组的头部视图前面的最后一行。

        scrollRenderAheadDistance      number
        进行设置当该行进入屏幕多少像素以内之后就开始渲染该行

三、ListView的高阶特性

        ListView同样支持一些高级特性，包括设置每一组的粘性的头部(类似于iPhone)、支持设置列表的header以及footer视图、当数据列表滑动到最底部的时候支持onEndReached方法回调、设备屏幕列表可见的视图数据发生变化的时候回调onChangeVisibleRows以及一些性能方面的优化特性。
         ListView设计的时候，当需要动态加载非常大的数据的时候，下面有一些方法性能优化的方法可以让我们的ListView滚动的时候更加平滑：
         （1）只更新渲染数据变化的那一行，rowHasChanged方法会告诉ListView组件是否需要重新渲染当前那一行。
         （2）选择渲染的频率，默认情况下面每一个event-loop(事件循环)只会渲染一行(可以同pageSize自定义属性设置)。这样可以把大的工作量进行分隔，提供整体渲染的性能。