ScrollView
一个封装了平台的 ScrollView(滚动视图)的组件,同时还集成了触摸锁定的“响应者”系统。
记住 ScrollView 必须有一个确定的高度才能正常工作,因为它实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器(通过滚动操作)。要给 ScrollView 一个确定的高度的话,要么直接给它设置高度(不建议),要么确定所有的父容器都有确定的高度。一般来说我们会给 ScrollView 设置flex: 1
以使其自动填充父容器的空余空间,但前提条件是所有的父容器本身也设置了 flex 或者指定了高度,否则就会导致无法正常滚动,你可以使用元素查看器来查找具体哪一层高度不正确。
ScrollView 内部的其他响应者尚无法阻止 ScrollView 本身成为响应者。
ScrollView
和FlatList
应该如何选择?ScrollView 会简单粗暴地把所有子元素一次性全部渲染出来。其原理浅显易懂,使用上自然也最简单。然而这样简单的渲染逻辑自然带来了性能上的不足。想象一下你有一个特别长的列表需要显示,可能有好几屏的高度。创建和渲染那些屏幕以外的 JS 组件和原生视图,显然对于渲染性能和内存占用都是一种极大的拖累和浪费。
这就是为什么我们还有专门的FlatList
组件。FlatList
会惰性渲染子元素,只在它们将要出现在屏幕中时开始渲染。这种惰性渲染逻辑要复杂很多,因而 API 在使用上也更为繁琐。除非你要渲染的数据特别少,否则你都应该尽量使用FlatList
,哪怕它们用起来更麻烦。
此外FlatList
还可以方便地渲染行间分隔线,支持多列布局,无限滚动加载等等。
示例
文档
Props
View Props
继承了所有的View Props.
alwaysBounceHorizontal
iOS
当此属性为 true 时,水平方向即使内容比滚动视图本身还要小,也可以弹性地拉动一截。当horizontal={true}
时默认值为 true,否则为 false。
Type | Default |
---|---|
bool | true when horizontal={true} false otherwise |
alwaysBounceVertical
iOS
当此属性为 true 时,垂直方向即使内容比滚动视图本身还要小,也可以弹性地拉动一截。当horizontal={true}
时默认值为 false,否则为 true。
Type | Default |
---|---|
bool | false when vertical={true} true otherwise |
contentContainerStyle
这些样式会应用到一个内层的内容容器上,所有的子视图都会包裹在内容容器内。示例:
return (
<ScrollView contentContainerStyle={styles.contentContainer}>
</ScrollView>
);
...
const styles = StyleSheet.create({
contentContainer: {
paddingVertical: 20
}
});
类型 | 必需 |
---|---|
StyleSheetPropType(View Style props) | 否 |
disableScrollViewPanResponder
When true, the default JS pan responder on the ScrollView is disabled, and full control over touches inside the ScrollView is left to its child components. This is particularly useful if snapToInterval
is enabled, since it does not follow typical touch patterns. Do not use this on regular ScrollView use cases without snapToInterval
as it may cause unexpected touches to occur while scrolling. The default value is false.
类型 | Required |
---|---|
bool | No |
endFillColor
Android
有时候滚动视图会占据比实际内容更多的空间。这种情况下可以使用此属性,指定以某种颜色来填充多余的空间,以避免设置背景和创建不必要的绘制开销。一般情况下并不需要这种高级优化技巧。
类型 |
---|
color |
fadingEdgeLength
Android
Fades out the edges of the the scroll content.
If the value is greater than 0
, the fading edges will be set accordingly to the current scroll direction and position, indicating if there is more content to show.
Type | Default |
---|---|
number | 0 |
keyboardDismissMode
用户拖拽滚动视图的时候,是否要隐藏软键盘。
跨平台可用的值
'none'
(默认值),拖拽时不隐藏软键盘。'on-drag'
,当拖拽开始的时候隐藏软键盘。
仅 iOS 可用的值
'interactive'
,软键盘伴随拖拽操作同步地消失,并且如果往上滑动会恢复键盘。安卓设备上不支持这个选项,会表现的和none
一样。
类型 | 必需 |
---|---|
enum('none', 'on-drag', 'interactive') | 否 |
keyboardShouldPersistTaps
如果当前界面有软键盘,那么点击 scrollview 后是否收起键盘,取决于本属性的设置。(译注:很多人反应 TextInput 无法自动失去焦点/需要点击多次切换到其他组件等等问题,其关键都是需要将 TextInput 放到 ScrollView 中再设置本属性)
'never'
(默认值),点击 TextInput 以外的子组件会使当前的软键盘收起。此时子元素不会收到点击事件。'always'
,键盘不会自动收起,ScrollView 也不会捕捉点击事件,但子组件可以捕获。'handled'
,当点击事件被子组件捕获时,键盘不会自动收起。这样切换 TextInput 时键盘可以保持状态。多数带有 TextInput 的情况下你应该选择此项。false
,已过时,请使用'never'代替。true
,已过时,请使用'always'代替。
类型 | 必需 |
---|---|
enum('always', 'never', 'handled', false, true) | 否 |
maintainVisibleContentPosition
iOS
When set, the scroll view will adjust the scroll position so that the first child that is currently visible and at or beyond minIndexForVisible
will not change position. This is useful for lists that are loading content in both directions, e.g. a chat thread, where new messages coming in might otherwise cause the scroll position to jump. A value of 0 is common, but other values such as 1 can be used to skip loading spinners or other content that should not maintain position.
The optional autoscrollToTopThreshold
can be used to make the content automatically scroll to the top after making the adjustment if the user was within the threshold of the top before the adjustment was made. This is also useful for chat-like applications where you want to see new messages scroll into place, but not if the user has scrolled up a ways and it would be disruptive to scroll a bunch.
Caveat 1: Reordering elements in the scrollview with this enabled will probably cause jumpiness and jank. It can be fixed, but there are currently no plans to do so. For now, don't re-order the content of any ScrollViews or Lists that use this feature.
Caveat 2: This uses contentOffset
and frame.origin
in native code to compute visibility. Occlusion, transforms, and other complexity won't be taken into account as to whether content is "visible" or not.
Type |
---|
object: { minIndexForVisible: number, autoscrollToTopThreshold: number } |
maximumZoomScale
iOS
允许的最大缩放比例。默认值为 1.0。
Type | Default |
---|---|
number | 1.0 |
minimumZoomScale
iOS
允许的最小缩放比例。默认值为 1.0。
Type | Default |
---|---|
number | 1.0 |
nestedScrollEnabled
Android
在 Android API level 21(5.0)以上启用嵌套滚动。iOS 上默认支持嵌套滚动。
Type | Default |
---|---|
bool | true |
onContentSizeChange
此函数会在 ScrollView 内部可滚动内容的视图发生变化时调用。
调用参数为内容视图的宽和高: (contentWidth, contentHeight)
。
此方法是通过绑定在内容容器上的 onLayout 来实现的。
类型 | 必需 |
---|---|
function | 否 |
onMomentumScrollBegin
滚动动画 开始时调用此函数。
类型 | 必需 |
---|---|
function | 否 |
onMomentumScrollEnd
滚动动画结束时调用此函数。
类型 | 必需 |
---|---|
function | 否 |
onScroll
在滚动的过程中,每帧最多调用一次此回调函数。调用的频率可以用scrollEventThrottle
属性来控制。The event has the following shape (all values are numbers):
{
nativeEvent: {
contentInset: {bottom, left, right, top},
contentOffset: {x, y},
contentSize: {height, width},
layoutMeasurement: {height, width},
zoomScale
}
}
类型 | 必需 |
---|---|
function | 否 |
onScrollBeginDrag
当用户开始拖动此视图时调用此函数。
类型 | 必需 |
---|---|
function | 否 |
onScrollEndDrag
当用户停止拖动此视图时调用此函数。
类型 | 必需 |
---|---|
function | 否 |
onScrollToTop
iOS
Fires when the scroll view scrolls to top after the status bar has been tapped.
Type |
---|
function |
overScrollMode
覆盖默认的 overScroll 模式
可选的值有:
'auto'
- 默认值,允许用户在内容超出视图高度之后可以滚动视图。'always'
- 无论内容尺寸,用户始终可以滚动视图。'never'
- 始终不允许用户滚动视图。
类型 | 必需 | 平台 |
---|---|---|
enum('auto', 'always', 'never') | 否 | Android |
pagingEnabled
当值为 true 时,滚动条会停在滚动视图的尺寸的整数倍位置。这个可以用在水平分页上。默认值为 false。
类型 |
---|