React Native常用组件之ListView

2016-02-26 13:38小小哆iOSDev,React Native相关评论(0)

一、前言

  • ListView组件是React Native中一个比较核心的组件,用途非常的广。
  • 该组件设计用来高效的展示垂直滚动的数据列表。
  • 最简单的API就是创建一个ListView.DataSource对象,同时给该对象传入一个简单的数据集合。
  • 并且使用数据源(data source)实例化一个ListView组件,定义一个renderRow回调方法(该方法的参数是一个数组),该renderRow方法会返回一个可渲染的组件(该就是列表的每一行的item)

二、ListView常用的属性

  • ScrollView相关属性样式全部继承
  • dataSource ListViewDataSource 设置ListView的数据源
  • initialListSize number 设置ListView组件刚刚加载的时候渲染的列表行数,用这个属性确定首屏或者首页加载的数量,而不是花大量的时间渲染加载很多页面数据,提高性能
    onChangeVisibleRows function (visibleRows,changedRows)=>void。当可见的行发生变化的时候回调该方法。visibleRows参数对所有可见的行为{selectionID:{rowId:true}}的形式,changedRow参数对已经改变可见的行为{selectionID:{rowID:true|false}}。该值true代表可见,false代表在视图之外不可见的行。
  • onEndReachedThreshold number 当偏移量达到设置的临界值调用onEndReached
    onEndReached function 方法,当所有的数据项行被渲染之后,并且列表往下进行滚动。一直滚动到距离底部onEndReachedThredshold设置的值进行回调该方法。原生的滚动事件进行传递(通过参数的形式)。

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

  • removeClippedSubviews bool 该属性用于提供大数据列表的滚动性能。该使用的时候需要给每一行(row)的布局添加over:'hidden'样式。该属性默认是开启状态。
  • renderFooter function 方法 ()=>renderable ,在每次渲染过程中头和尾总会重新进行渲染。如果发现该重新绘制的性能开销比较大的时候,可以使用StaticContainer容器或者其他合适的组件。在每一次渲染过程中Footer(尾)该会一直在列表的底部,header(头)该会一直在列表的头部
  • renderHeader function 方法 使用情况和上面的renderFooter差不多
  • 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可以支持一些高级特性,包括设置每一组的粘性的头部(类似于iPhone)、支持设置列表的header以及footer视图、当数据列表滑动到最底部的时候支持onEndReached方法回调、设备屏幕列表可见的视图数据发生变化的时候回调onChangeVisibleRows以及一些性能方面的优化特性。
  • ListView设计的时候,当需要动态加载非常大的数据的时候,下面有一些方法性能优化的方法可以让我们的ListView滚动的时候更加平滑:

    • 只更新渲染数据变化的那一行 ,rowHasChanged方法会告诉ListView组件是否需要重新渲染当前那一行。
    • 选择渲染的频率,默认情况下面每一个event-loop(事件循环)只会渲染一行(可以同pageSize自定义属性设置)。这样可以把大的工作量进行分隔,提供整体渲染的性能。

四、案例小练习

  • 4.1 最简单的ListView

    • 核心代码

1.png

  • 运行效果截图

2.png

  • 4.2 常见的ListView

    • 核心代码

3.png
4.png

  • 运行效果截图

5.png

上一篇 React Native常用组件之ImageReact Native常用组件之TextInput 下一篇
评论 0
由于之前使用多说插件出现问题,导致以前的评论丢失,在此深表歉意!

站点统计

  • 建站日期:2014-12-06
  • 最后更新:2016-05-19
  • 运行时间:1906 天
  • 文章数量:46 篇