《React-Native系列》16、 RN组件之ListView

今天来谈谈ReactNative提供的ListView组件,ListView是我们最常用的组件。

还是先来看看官网怎么说的。

ListView - 一个核心组件,用于高效地显示一个可以垂直滚动的变化的数据列表。最基本的使用方式就是创建一个ListView.DataSource数据源,然后给它传递一个普通的数据数组,再使用数据源来实例化一个ListView组件,并且定义它的renderRow回调函数,这个函数会接受数组中的每个数据作为参数,返回一个可渲染的组件(作为listview的每一行)。

ListView还支持一些高级特性,譬如给每段/组(section)数据添加一个带有粘性的头部(类似iPhone的通讯录,其首字母会在滑动过程中吸附在屏幕上方);在列表头部和尾部增加单独的内容;在到达列表尾部的时候调用回调函数(onEndReached),还有在视野内可见的数据变化时调用回调函数(onChangeVisibleRows),以及一些性能方面的优化。

有一些性能优化使得ListView可以滚动的更加平滑,尤其是在动态加载可能很大(或者概念上无限长的)数据集的时候:
只更新变化的行 - 提供给数据源的rowHasChanged函数可以告诉ListView它是否需要重绘一行数据(即:数据是否发生了变化)参见ListViewDataSource
限制频率的行渲染 - 默认情况下,每次消息循环只有一行会被渲染(可以用pageSize属性配置)。这把较大的工作分散成小的碎片,以降低因为渲染而导致丢帧的可能性。

属性
ScrollView props... 
译注:这意味着ListView可以使用所有ScrollView的属性。

dataSource ListViewDataSource 
ListView.DataSource实例(列表依赖的数据源)

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

onChangeVisibleRows function  

(visibleRows, changedRows) => void
当可见的行的集合变化的时候调用此回调函数。visibleRows 以 { sectionID: { rowID: true }}的格式包含了所有可见行,而changedRows 以{ sectionID: { rowID: true | false }}的格式包含了所有刚刚改变了可见性的行,其中如果值为true表示一个行变得可见,而为false表示行刚刚离开可视区域而变得不可见。

onEndReached function 
当所有的数据都已经渲染过,并且列表被滚动到距离最底部不足onEndReachedThreshold个像素的距离时调用。原生的滚动事件会被作为参数传递。译注:当第一次渲染时,如果数据不足一屏(比如初始值是空的),这个事件也会被触发。

onEndReachedThreshold number 
调用onEndReached之前的临界值,单位是像素。

pageSize number 
每次事件循环(每帧)渲染的行数。

removeClippedSubviews bool 
用于提升大列表的滚动性能。需要给行容器添加样式overflow:'hidden'。(Android已默认添加此样式)。此属性默认开启。

renderFooter function 
() => renderable
页头与页脚会在每次渲染过程中都重新渲染(如果提供了这些属性)。如果它们重绘的性能开销很大,把他们包装到一个StaticContainer或者其它恰当的结构中。页脚会永远在列表的最底部,而页头会在最顶部。

renderHeader function 

renderRow function 
(rowData, sectionID, rowID, highlightRow) => renderable
从数据源(Data source)中接受一条数据,以及它和它所在section的ID。返回一个可渲染的组件来为这行数据进行渲染。默认情况下参数中的数据就是放进数据源中的数据本身,不过也可以提供一些转换器。
如果某一行正在被高亮(通过调用highlightRow函数),ListView会得到相应的通知。当一行被高亮时,其两侧的分割线会被隐藏。行的高亮状态可以通过调用highlightRow(null)来重置。

renderScrollComponent function 
(props) => renderable
指定一个函数,在其中返回一个可以滚动的组件。ListView将会在该组件内部进行渲染。默认情况下会返回一个包含指定属性的ScrollView。

renderSectionHeader function 
(sectionData, sectionID) => renderable
如果提供了此函数,会为每个小节(section)渲染一个粘性的标题。
粘性是指当它刚出现时,会处在对应小节的内容顶部;继续下滑当它到达屏幕顶端的时候,它会停留在屏幕顶端,一直到对应的位置被下一个小节的标题占据为止。

renderSeparator function 
(sectionID, rowID, adjacentRowHighlighted) => renderable
如果提供了此属性,一个可渲染的组件会被渲染在每一行下面,除了小节标题的前面的最后一行。在其上方的小节ID和行ID,以及邻近的行是否被高亮会作为参数传递进来。

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

ios stickyHeaderIndices [number] 
一个子视图下标的数组,用于决定哪些成员会在滚动之后固定在屏幕顶端。举个例子,传递stickyHeaderIndices={[0]}会让第一个成员固定在滚动视图顶端。这个属性不能和horizontal={true}一起使用。


示例:

1、在构造函数中我们定义dataSource的rowHasChanged函数,告诉ListView它是否需要重绘一行数据。这个写法很固定!

constructor(props) {
    super(props);
    this.state = {
        dataSource: new ListView.DataSource({
            rowHasChanged: (r1, r2) => r1 !== r2,
        }),
    };
}


2、在componentWillMount方法中加载数据(fetch用法可以参照我之前写的文章)

  componentWillMount() {
     this._fetchListData(params);
  }


3、在 _fetchListData方法获取数据后设置dataSource
this.setState({
   dataSource: this.state.dataSource.cloneWithRows(list),
});


4、在render方法中定义ListView

<ListView
    enableEmptySections={true}
    dataSource={this.state.dataSource}
    renderRow={this._renderRow.bind(this)}
    renderFooter={this._renderFooter.bind(this)}
    renderHeader={this._rendHeader.bind(this)}
    onResponderMove={(e)=> {this._onResponderMove(e)}}
    onResponderRelease={(e)=> {this._onResponderRelease(e)}}
    onEndReached={()=>{console.log('---');}}
/>


5、实现_renderRow方法

从数据源(Data source)中接受一条数据,以及它和它所在section的ID。返回一个可渲染的组件来为这行数据进行渲染

 _renderRow(rowData, sectionid, rowid) {
    return (<View>xxxxx</View>);
}


6、实现 _rendHeader方法和 _renderFooter方法

页头与页脚会在每次渲染过程中都重新渲染。

 _rendHeader() {
    return (<View>header</View>);
}

 _renderFooter() {
    return (<View>footer</View>);
}

7、如果需要实现上拉刷新和下拉刷新的话,还需要基于onResponderMove和onResponderRelease方法来实现

这个先不在这篇文章里写,后续专门写一篇文章。


今天,我们只是简单介绍了下ListView的基本效果,其实ListView还有很多知识点,譬如:

1、ListView sticky效果实现,类似iPhone通讯录的效果,参考:React Native ListView sticky效果实现

2、ListView上如果实现跨平台的上拉刷新和下拉刷新,这个我们后面介绍

3、ListView的性能问题,无限大列表加载

4、...


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值