• React Native的ListView的布局使用


    1>

    ListView组件用于显示一个垂直的滚动列表,其中的元素之间结构近似而仅数据不同。

    ListView更适于长列表数据,且元素个数可以增删。和ScrollView不同的是,ListView并不立即渲染所有元素,而是优先渲染屏幕上可见的元素。

    ListView组件必须的两个属性是dataSourcerenderRowdataSource是列表的数据源,而renderRow则逐个解析数据源中的数据,然后返回一个设定好格式的组件来渲染。

    下面的例子创建了一个简单的ListView,并预设了一些模拟数据。首先是初始化ListView所需的dataSource,其中的每一项(行)数据之后都在renderRow中被渲染成了Text组件,最后构成整个ListView

    rowHasChanged函数也是ListView的必需属性。这里我们只是简单的比较两行数据是否是同一个数据(===符号只比较基本类型数据的值,和引用类型的地址)来判断某行数据是否变化了。

     

    2>ListView相关属性:

     

    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}一起使用。

    方法#

    getMetrics() 

     

    3.代码实现:

     

  • 相关阅读:
    【Repost】Comparision of B-Tree and LSM Tree
    字符串经典算法 Knuth-Morris-Pratt Boyer-Moore AC(Aho-Corasick)算法 后缀自动机
    【Leetcode 913】【Hard】Cat and Mouse 博弈论
    【转】初探计算机视觉的三个源头、兼谈人工智能
    MySQL--06(索引)
    MySQL--05(子查询&视图)
    MySQL--04(聚合函数&表连接查询)
    MySQL--03(增删改查&主键)
    MySQL--02
    MySQL--01
  • 原文地址:https://www.cnblogs.com/pengsi/p/5903850.html
Copyright © 2020-2023  润新知