美文网首页
ReactNative Component  之 ListVie

ReactNative Component  之 ListVie

作者: Lucky_1122 | 来源:发表于2016-10-26 17:22 被阅读50次

1.ListView类似于native的UItableview,用于显示一个可以垂直滚动的变化的数据列表

2.首先了解ListView的属性

dataSource ListViewDataSource

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

initialListSize number

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

onEndReached function

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

pageSize number

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

renderRow function

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

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

renderSectionHeader function

(sectionData, sectionID) => renderable

如果提供了此函数,会为每个小节(section)渲染一个粘性的标题。

粘性是指当它刚出现时,会处在对应小节的内容顶部;继续下滑当它到达屏幕顶端的时候,它会停留在屏幕顶端,一直到对应的位置被下一个小节的标题占据为止。

renderSeparator function

(sectionID, rowID, adjacentRowHighlighted) => renderable

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

3.实现效果图

可以添加点击事件

4.核心代码

本文参考http://reactnative.cn/docs/0.35/image.html#content

相关文章

网友评论

      本文标题:ReactNative Component  之 ListVie

      本文链接:https://www.haomeiwen.com/subject/sqtjuttx.html