InfiniteListView 无限缓存列表 >=1.1.0

这是一个适用于渲染数据很多时候的无限缓存列表，使用方式和接口和ListView基本一致，但性能比ListView更好

使用说明

基本用法

使用方式同 ListView 组件一致，通过 dataSource 属性传递待渲染的数据源，renderRow 属性定义每一行的渲染函数。

<InfiniteListView
   dataSource={this.state.dataSource}
   renderRow={(rowData) => <Text style={{ padding: 20, fontSize: 15, backgroundColor: getRandomColor() }}>{rowData}</Text>}
/>

列表项不等高

InfiniteListView 列表项每行必须设定一个给定高度，不等高情况下可以通过 configureRowHeight 属性进行指定。

<InfiniteListView
    dataSource={this.state.dataSource}
    renderRow={(rowData) => <Text style={{ padding: 20, fontSize: 15, backgroundColor: getRandomColor() }}>{rowData}</Text>}
    configureRowHeight={(rowData, rowIndex) => {return rowIndex % 10 === 0 ? 120 : 100}}
/>

滑动过快

如果列表项滑动过快，滚动窗口到达的区域对应的列表项尚未开始渲染，则会出现短暂的白屏现象。对此，我们可以通过 limitedWindow 属性限制滚动窗口仅到达滑动到已经渲染完成的列表项区域，尚未完成渲染的列表项区域暂时无法进入滚动窗口。

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { InfiniteListView } from 'qunar-react-native';

export default class InfiniteListViewExample extends Component {
    constructor(props){
        super(props);

        const ds = new InfiniteListView.DataSource({
            rowHasChanged: (r1, r2) => r1 !== r2,
        });
        const rows = [];
        for(let i = 0; i < 200; i++){
            rows.push(i)
        }
        this.dataSource = ds.cloneWithRows(rows);
    }

    render() {
        return (
            <View style={{ flexGrow: 1, flexShrink: 1 }}>
                <InfiniteListView
                    limitedWindow
                    dataSource={this.dataSource}
                    renderRow={(rowData) => <Text style={{ padding: 20, fontSize: 15, backgroundColor: getRandomColor() }}>{rowData}</Text>}
                />
            </View>
        )
    }
}

const getRandomColor = () => {
    const letters = '3456789ABC'.split('');
    let color = '#';
    for (let i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 10)];
    }
    return color;
};

属性

dataSource =={ ListViewDataSource }==

源数据。

initialListSize =={ number }==

指定在组件刚挂载的时候渲染多少行数据。用这个属性来确保首屏显示合适数量的数据，而不是花费太多帧逐步显示出来。

onEndReached =={ function }==

当所有的数据都已经渲染过，并且列表被滚动到距离最底部不足onEndReachedThreshold个像素的距离时调用。原生的滚动事件会被作为参数传递。

onEndReachedThreshold =={ number }==

调用onEndReached之前的临界值，单位是像素。

pageSize =={ number }==

每次事件循环（每帧）渲染的行数。

renderFooter =={ function }==

() => renderable

页头与页脚会在每次渲染过程中都重新渲染（如果提供了这些属性）。如果它们重绘的性能开销很大，可以考虑使用renderStaticHeader/renderStaticFooter。页脚会永远在列表的最底部，而页头会在最顶部。

返回值: renderable 页头组件

renderHeader =={ function }==

() => renderable

同renderFooter，渲染页尾组件。

返回值: renderable 页尾组件

renderStaticFooter =={ function }==

() => renderable

只渲染一次的头部组件。

返回值: renderable 页头组件

renderStaticHeader =={ function }==

() => renderable

只渲染一次的尾部组件。

返回值: renderable 页尾组件

renderRow =={ function }==

(rowData, sectionID, rowID, highlightRow) => renderable

从数据源(Data source)中接受一条数据，以及它和它所在section的ID。返回一个可渲染的组件来为这行数据进行渲染。默认情况下参数中的数据就是放进数据源中的数据本身，不过也可以提供一些转换器。

方法参数:

参数名 类型 描述 支持版本
rowData React.PropTypes.any 数据源中的数据
sectionID string 所处section名
rowID number 所处section中的index
highlightRow function 通过调用该函数可通知InfiniteListView高亮该行

返回值: renderable 每行渲染组件

renderScrollComponent =={ function }==

(props) => renderable

指定一个函数，在其中返回一个可以滚动的组件。InfiniteListView将会在该组件内部进行渲染。默认情况下会返回一个包含指定属性的ScrollView。

方法参数:

参数名 类型 描述 支持版本
可滚动组件的属性 object

返回值: renderable 可滚动组件

scrollRenderAheadDistance =={ number }==

当一个行接近屏幕范围多少像素之内的时候，就开始渲染这一行。

useOriginScrollView =={ bool }==

如果提供了此属性，会使用原生ScrollView，配置了renderScrollComponent时不生效。

limitedWindow =={ React.PropTypes.bool }==

限制滚动窗口以防止渲染跟不上滑动速度，默认 false

scrollEventThrottle =={ React.PropTypes.number }==

触发onScroll最小间隔毫秒数，默认值为50。

configureRowHeight =={ React.PropTypes.func }==

(rowData, rowID) => number 指定每一行的高度。

方法

startRefreshing

同ScrollView，当前组件有refreshControl属性，并且没有正在下拉刷新，则强制触发下拉刷新，变成正在刷新的状态。

stopRefreshing

同ScrollView，当前组件有refreshControl属性，并且正在下拉刷新，则停止下拉刷新的状态。

startLoading

同ScrollView，当前组件有loadControl属性，并且没有正在加载，则强制触发加载更多，变成正在加载更多的状态。

stopLoading

同ScrollView，当前组件有loadControl属性，并且正在加载，则停止加载更多的状态。

scrollTo

同ScrollView ScrollTo。

scrollToIndex

第一个参数为目标index，第二个参数为configs对象，里面可配置animated: bool。

scrollToTop

立即回到顶部，相当于scrollTo({y: 0})

getScrollResponder

获取ScrollView，当使用原生ScrollView时(useOriginScrollView属性为true)返回滚动响应器。

返回值: scrollResponder ScrollView，当使用原生ScrollView时返回滚动响应器

Image
ListView