ReactNative之ListView学习总结（四）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)渲染一个粘性的标题。

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

stickySectionHeadersEnabled

来决定是否启用其粘性特性。

renderSeparator
function

(sectionID, rowID, adjacentRowHighlighted) => renderable

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

scrollRenderAheadDistance
number

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

stickyHeaderIndices
[number]

一个子视图下标的数组，用于决定哪些成员会在滚动之后固定在屏幕顶端。举个例子，传递

stickyHeaderIndices={[0]}

会让第一个成员固定在滚动视图顶端。这个属性不能和

horizontal={true}

一起使用。

stickySectionHeadersEnabled?:
bool

设置小节标题(section header)是否具有粘性。粘性是指当它刚出现时，会处在对应小节的内容顶部；继续下滑当它到达屏幕顶端的时候，它会停留在屏幕顶端，一直到对应的位置被下一个小节的标题占据为止。注意此设置在水平模式（

horizontal={true}

）下无效。由于不同平台的设计原则不同，此选项在iOS上默认开启，andriod上默认关闭。

方法

getMetrics()

导出一些用于性能分析的数据。

scrollTo(...args)

滚动到指定的x, y偏移处，可以指定是否加上过渡动画。

参考
ScrollView#scrollTo.

scrollToEnd(options?)

滚动到视图底部（水平方向的视图则滚动到最右边）。

加上动画参数

scrollToEnd({animated: true})

则启用平滑滚动动画，或是调用

scrollToEnd({animated: false})

来立即跳转。如果不使用参数，则

animated

选项默认启用。

ScrollView props...如下

contentContainerStyle StyleSheetPropType(ViewStylePropTypes)

这些样式会应用到一个内层的内容容器上，所有的子视图都会包裹在内容容器内。例子：

return (
<ScrollView contentContainerStyle={styles.contentContainer}>
</ScrollView>
);
...
var styles = StyleSheet.create({
contentContainer: {
paddingVertical: 20
}
});

horizontal
bool

当此属性为true的时候，所有的子视图会在水平方向上排成一行，而不是默认的在垂直方向上排成一列。默认值为false。

keyboardDismissMode
enum('none', "interactive", 'on-drag')

用户拖拽滚动视图的时候，是否要隐藏软键盘。

none

（默认值），拖拽时不隐藏软键盘。

on-drag

当拖拽开始的时候隐藏软键盘。

interactive

软键盘伴随拖拽操作同步地消失，并且如果往上滑动会恢复键盘。安卓设备上不支持这个选项，会表现的和

none

一样。

keyboardShouldPersistTaps
enum('always', 'never', 'handled', false, true)

如果当前界面有软键盘，那么点击scrollview后是否收起键盘，取决于本属性的设置。（译注：很多人反应TextInput无法自动失去焦点/需要点击多次切换到其他组件等等问题，其关键都是需要将TextInput放到ScrollView中再设置本属性）

'never'

（默认值），点击TextInput以外的子组件会使当前的软键盘收起。此时子元素不会收到点击事件。

'always'

，键盘不会自动收起，ScrollView也不会捕捉点击事件，但子组件可以捕获。

'handled'

，当点击事件被子组件捕获时，键盘不会自动收起。这样切换TextInput时键盘可以保持状态。多数带有TextInput的情况下你应该选择此项。

false

，已过期，请使用'never'代替。

true

，已过期，请使用'always'代替。

onContentSizeChange
function

此函数会在ScrollView内部可滚动内容的视图发生变化时调用。

调用参数为内容视图的宽和高:

(contentWidth, contentHeight)

此方法是通过绑定在内容容器上的onLayout来实现的。

onScroll
function

在滚动的过程中，每帧最多调用一次此回调函数。调用的频率可以用

scrollEventThrottle

属性来控制。

refreshControl
element

指定RefreshControl组件，用于为ScrollView提供下拉刷新功能。

removeClippedSubviews
bool

（实验特性）：当此属性为true时，屏幕之外的子视图（子视图的

overflow

样式需要设为

hidden

）会被移除。这个可以提升大列表的滚动性能。默认值为true。

showsHorizontalScrollIndicator
bool

当此属性为true的时候，显示一个水平方向的滚动条。

showsVerticalScrollIndicator
bool

当此属性为true的时候，显示一个垂直方向的滚动条。

style
style

Flexbox...

ShadowProp#style...

Transforms...

backfaceVisibility enum('visible', 'hidden')

backgroundColor string

borderColor string

borderTopColor string

borderRightColor string

borderBottomColor string

borderLeftColor string

borderRadius number

borderTopLeftRadius number

borderTopRightRadius number

borderBottomLeftRadius number

borderBottomRightRadius number

borderStyle enum('solid', 'dotted', 'dashed')

borderWidth number

borderTopWidth number

borderRightWidth number

borderBottomWidth number

borderLeftWidth number

opacity number

overflow enum('visible', 'hidden')

shadowColor string

shadowOffset {width: number, height: number}

shadowOpacity number

shadowRadius number

endFillColor color

有时候滚动视图会占据比实际内容更多的空间。这种情况下可以使用此属性，指定以某种颜色来填充多余的空间，以避免设置背景和创建不必要的绘制开销。一般情况下并不需要这种高级优化技巧。

overScrollMode enum('auto', 'always', 'never')

覆盖默认的overScroll模式

可选的值有：

'auto'

- 默认值，允许用户在内容超出视图高度之后可以滚动视图。

'always'

- 无论内容尺寸，用户始终可以滚动视图。

'never'

- 始终不允许用户滚动视图。

scrollPerfTag string

Tag used to log scroll performance on this scroll view. Will force momentum events to be turned on (see sendMomentumEvents). This doesn't do anything out of the box and you need to implement a custom native FpsListener for it to be useful.

alwaysBounceHorizontal bool

当此属性为true时，水平方向即使内容比滚动视图本身还要小，也可以弹性地拉动一截。当

horizontal={true}

时默认值为true，否则为false。

alwaysBounceVertical bool

当此属性为true时，垂直方向即使内容比滚动视图本身还要小，也可以弹性地拉动一截。当

horizontal={true}

时默认值为false，否则为true。

automaticallyAdjustContentInsets bool

如果滚动视图放在一个导航条或者工具条后面的时候，iOS系统是否要自动调整内容的范围。默认值为true。（译注：如果你的ScrollView或ListView的头部出现莫名其妙的空白，尝试将此属性置为false）

bounces bool

当值为true时，如果内容范围比滚动视图本身大，在到达内容末尾的时候，可以弹性地拉动一截。如果为false，尾部的所有弹性都会被禁用，即使

alwaysBounce*

属性为true。默认值为true。

bouncesZoom bool

当值为true时，使用手势缩放内容可以超过min/max的限制，然后在手指抬起之后弹回min/max的缩放比例。否则的话，缩放不能超过限制。

canCancelContentTouches bool

当值为false时，一旦有子节点响应触摸操作，即使手指开始移动也不会拖动滚动视图。默认值为true（在以上情况下可以拖动滚动视图。）

centerContent bool

当值为true时，如果滚动视图的内容比视图本身小，则会自动把内容居中放置。当内容比滚动视图大的时候，此属性没有作用。默认值为false。

contentInset {top: number, left: number, bottom: number, right: number}

内容范围相对滚动视图边缘的坐标。默认为

{0, 0, 0, 0}

。

contentOffset PointPropType

用来手动设置初始的滚动坐标。默认值为

{x: 0, y: 0}

。

decelerationRate number

一个浮点数，用于决定当用户抬起手指之后，滚动视图减速停下的速度。常见的选项有：

Normal

: 0.998 (默认值)

Fast

: 0.9

directionalLockEnabled bool

当值为真时，滚动视图在拖拽的时候会锁定只有垂直或水平方向可以滚动。默认值为false。

indicatorStyle enum('default', 'black', 'white')

设置滚动条的样式。

default

，默认值，等同

black

.

black

，黑色滚动条。

white

，白色滚动条。

maximumZoomScale number

允许的最大缩放比例。默认值为1.0。

minimumZoomScale number

允许的最小缩放比例。默认值为1.0。

onRefreshStart function

已过期

请使用

refreshControl

属性代替。

onScrollAnimationEnd function

当滚动动画结束之后调用此回调。

pagingEnabled
bool

当值为true时，滚动条会停在滚动视图的尺寸的整数倍位置。这个可以用在水平分页上。默认值为false。

scrollEnabled
bool

当值为false的时候，内容不能滚动，默认值为true。

fe25

scrollEventThrottle number

这个属性控制在滚动过程中，scroll事件被调用的频率（单位是每秒事件数量）。更大的数值能够更及时的跟踪滚动位置，不过可能会带来性能问题，因为更多的信息会通过bridge传递。默认值为0，意味着每次视图被滚动，scroll事件只会被调用一次。

scrollIndicatorInsets {top: number, left: number, bottom: number, right: number}

决定滚动条距离视图边缘的坐标。这个值应该和

contentInset

一样。默认值为

{0, 0, 0, 0}

。

scrollsToTop bool

当此值为true时，点击状态栏的时候视图会滚动到顶部。默认值为true。

snapToAlignment enum('start', "center", 'end')

当设置了

snapToInterval

，

snapToAlignment

会定义停驻点与滚动视图之间的关系。

start

(默认) 会将停驻点对齐在左侧（水平）或顶部（垂直）

center

会将停驻点对齐到中间

end

会将停驻点对齐到右侧（水平）或底部（垂直）

snapToInterval number

当设置了此属性时，会让滚动视图滚动停止后，停止在

snapToInterval

的倍数的位置。这可以在一些子视图比滚动视图本身小的时候用于实现分页显示。与

snapToAlignment

组合使用。

stickyHeaderIndices
[number]

一个子视图下标的数组，用于决定哪些成员会在滚动之后固定在屏幕顶端。举个例子，传递

stickyHeaderIndices={[0]}

会让第一个成员固定在滚动视图顶端。这个属性不能和

horizontal={true}

一起使用。

zoomScale number

滚动视图内容初始的缩放比例。默认值为1.0。