ScrollView

ScrollView

包装平台ScrollView，同时提供与触摸锁定“响应者”系统集成的组件。

请记住，ScrollViews必须具有有限的高度才能工作，因为它们将无限高度的子元素包含到有界的容器中（通过滚动交互）。为了限制ScrollView的高度，可以直接设置视图的高度（不鼓励）或确保所有父视图的高度都是有界的。忘记传递{flex: 1}视图堆栈可能会导致错误，元素检查器可以很容易地进行调试。

尚不支持其他包含的响应者阻止此滚动视图成为响应者。

<ScrollView>vs <FlatList>- 使用哪一个？

ScrollView只需一次呈现所有反应的子组件。这使得它很容易理解和使用。

另一方面，这有一个性能下降。想象一下，你有一个很长的项目列表要显示，可能是几个屏幕价值的内容。一次创建所有内容的JS组件和本地视图，其中大部分甚至可能不会显示，这将导致渲染速度变慢并增加内存使用量。

这是FlatList发挥作用的地方。FlatList只是在他们即将出现时才会懒散地呈现项目，并移除在屏幕之外滚动的项目以节省内存和处理时间。

FlatList 如果您想在您的项目之间呈现分隔符，多列，无限滚动加载或其支持的任何其他功能，也非常方便。

Props

ViewPropTypes props...

contentContainerStyle?: StyleSheetPropType(ViewStylePropTypes)

这些样式将应用于包装所有子视图的滚动视图内容容器。例：

return (
  <ScrollView contentContainerStyle={styles.contentContainer}>
  </ScrollView>

...
const styles = StyleSheet.create{
  contentContainer: {
    paddingVertical: 20
  }
}

horizontal?: bool

如果为true，则滚动视图的子项将在一行中水平排列，而不是在列中垂直排列。默认值是false。

keyboardDismissMode?: enum('none', 'on-drag', 'interactive')

确定键盘是否因拖动而被解散。

跨平台

• 'none' (the default), drags do not dismiss the keyboard.

• 'on-drag', the keyboard is dismissed when a drag begins.

仅限iOS

• 'interactive'，键盘与拖动交互式消除并与触摸同步移动; 向上拖动取消解雇。在Android上，这不受支持，它与'none'具有相同的行为.keyboardShouldPersistTaps ?: enum('always', 'never', 'handled', false, true)确定键盘在点击后应该保持可见状态。

• 'never'（默认设置），当键盘处于关闭状态时，轻敲焦点文本输入的外部将关闭键盘。发生这种情况时，儿童不会收到水龙头。

• 'always'，键盘不会自动关闭，并且滚动视图不会捕捉水龙头，但滚动视图的子项可以捕捉水龙头。

• 'handled'，当水龙头由儿童处理时（或由祖先捕获），键盘不会自动消除。

• false，不推荐使用，而是使用'never'

• true，不推荐使用，而是使用“always”

onContentSizeChange?: function

ScrollView的可滚动内容视图更改时调用。

Handler函数传递的内容宽度和内容高度作为参数： (contentWidth, contentHeight)

它使用连接到此ScrollView呈现的内容容器的onLayout处理程序来实现。

onMomentumScrollBegin?: function

当动量滚动开始时滚动（当滚动视图滑动到停止时发生滚动）。

onMomentumScrollEnd?: function

当动量滚动结束时调用（当滚动视图滑动到停止时发生滚动）。

onScroll?: function

滚动期间每帧最多触发一次。事件的频率可以使用scrollEventThrottle道具来控制。

pagingEnabled?: bool

如果为true，则滚动视图在滚动时停止滚动视图大小的倍数。这可以用于水平分页。默认值是false。

Note: Vertical pagination is not supported on Android.

refreshControl?: element

一个RefreshControl组件，用于为ScrollView提供拉到刷新功能。只适用于垂直ScrollViews（horizontal道具必须false）。

请参阅RefreshControl。

removeClippedSubviews?: bool

实验：当为真时，屏幕外的子视图（其overflow值hidden）将从其原始支持超级视图中移除。这可以提高长列表的滚动性能。默认值是true。

scrollEnabled?: bool

如果为false，则视图无法通过触摸交互进行滚动。默认值是true。

请注意，视图始终可以通过调用进行滚动scrollTo。

showsHorizontalScrollIndicator?: bool

如果为true，则显示水平滚动指示符。默认值是true。

showsVerticalScrollIndicator?: bool

如果为true，则显示垂直滚动指示符。默认值是true。

stickyHeaderIndices?: [number]

一组儿童指标，用于确定在滚动时哪些儿童停靠在屏幕的顶部。例如，传递stickyHeaderIndices={[0]}将导致第一个孩子被固定到滚动视图的顶部。该属性不支持与horizontal={true}。

style?: style

{"blocks":[{"type":"header-six","text":"Layout Props...","depth":0,"inlineStyleRanges":[],"entityRanges":[],"key":"107786"}],"entityMap":[]}

{"blocks":[{"type":"header-six","text":"Shadow Props...","depth":0,"inlineStyleRanges":[],"entityRanges":[],"key":"107787"}],"entityMap":[]}

{"blocks":[{"type":"header-six","text":"Transforms...","depth":0,"inlineStyleRanges":[],"entityRanges":[{"key":0,"offset":0,"length":13}],"key":"107788"}],"entityMap":[{"type":"LINK","mutability":"MUTABLE","data":{"url":"https:\/\/facebook.github.io\/react-native\/docs\/transforms.html#props"}}]}

{"blocks":[{"type":"header-six","text":"backfaceVisibility enum('visible', 'hidden')","depth":0,"inlineStyleRanges":[],"entityRanges":[],"key":"107789"}],"entityMap":[]}

{"blocks":[{"type":"header-six","text":"backgroundColor color","depth":0,"inlineStyleRanges":[],"entityRanges":[],"key":"107790"}],"entityMap":[]}

{"blocks":[{"type":"header-six","text":"borderBottomColor color","depth":0,"inlineStyleRanges":[],"entityRanges":[],"key":"107791"}],"entityMap":[]}

{"blocks":[{"type":"header-six","text":"borderBottomLeftRadius number","depth":0,"inlineStyleRanges":[],"entityRanges":[],"key":"107792"}],"entityMap":[]}

{"blocks":[{"type":"header-six","text":"borderBottomRightRadius number","depth":0,"inlineStyleRanges":[],"entityRanges":[],"key":"107793"}],"entityMap":[]}

{"blocks":[{"type":"header-six","text":"borderBottomWidth number","depth":0,"inlineStyleRanges":[],"entityRanges":[],"key":"107794"}],"entityMap":[]}

{"blocks":[{"type":"header-six","text":"borderColor color","depth":0,"inlineStyleRanges":[],"entityRanges":[],"key":"107795"}],"entityMap":[]}

{"blocks":[{"type":"header-six","text":"borderLeftColor color","depth":0,"inlineStyleRanges":[],"entityRanges":[],"key":"107796"}],"entityMap":[]}

{"blocks":[{"type":"header-six","text":"borderLeftWidth number","depth":0,"inlineStyleRanges":[],"entityRanges":[],"key":"107797"}],"entityMap":[]}

{"blocks":[{"type":"header-six","text":"borderRadius number","depth":0,"inlineStyleRanges":[],"entityRanges":[],"key":"107798"}],"entityMap":[]}

{"blocks":[{"type":"header-six","text":"borderRightColor color","depth":0,"inlineStyleRanges":[],"entityRanges":[],"key":"107799"}],"entityMap":[]}

{"blocks":[{"type":"header-six","text":"borderRightWidth number","depth":0,"inlineStyleRanges":[],"entityRanges":[],"key":"107800"}],"entityMap":[]}

{"blocks":[{"type":"header-six","text":"borderStyle enum('solid', 'dotted', 'dashed')","depth":0,"inlineStyleRanges":[],"entityRanges":[],"key":"107801"}],"entityMap":[]}

{"blocks":[{"type":"header-six","text":"borderTopColor color","depth":0,"inlineStyleRanges":[],"entityRanges":[],"key":"107802"}],"entityMap":[]}

{"blocks":[{"type":"header-six","text":"borderTopLeftRadius number","depth":0,"inlineStyleRanges":[],"entityRanges":[],"key":"107803"}],"entityMap":[]}

{"blocks":[{"type":"header-six","text":"borderTopRightRadius number","depth":0,"inlineStyleRanges":[],"entityRanges":[],"key":"107804"}],"entityMap":[]}

{"blocks":[{"type":"header-six","text":"borderTopWidth number","depth":0,"inlineStyleRanges":[],"entityRanges":[],"key":"107805"}],"entityMap":[]}

{"blocks":[{"type":"header-six","text":"borderWidth number","depth":0,"inlineStyleRanges":[],"entityRanges":[],"key":"107806"}],"entityMap":[]}

{"blocks":[{"type":"header-six","text":"opacity number","depth":0,"inlineStyleRanges":[],"entityRanges":[],"key":"107807"}],"entityMap":[]}

{"entityMap":[{"type":"LINK","mutability":"MUTABLE","data":{"url":"https:\/\/developer.android.com\/training\/material\/shadows-clipping.html#Elevation"}},{"type":"LINK","mutability":"MUTABLE","data":{"url":"https:\/\/developer.android.com\/training\/material\/shadows-clipping.html#Elevation"}}],"blocks":[{"key":"9m9rb","text":"androidelevation\u6570\u5b57\uff08\u4ec5\u9650Android\uff09\u4f7f\u7528Android\u7684\u57fa\u7840\u9ad8\u7a0bAPI\u8bbe\u7f6e\u89c6\u56fe\u7684\u9ad8\u7a0b\u3002\u8fd9\u4f1a\u4e3a\u9879\u76ee\u6dfb\u52a0\u6295\u5f71\u5e76\u5f71\u54cd\u91cd\u53e0\u89c6\u56fe\u7684z\u987a\u5e8f\u3002\u4ec5\u652f\u6301Android 5.0+\uff0c\u5bf9\u65e9\u671f\u7248\u672c\u65e0\u6548\u3002","type":"header-six","depth":0,"inlineStyleRanges":[],"entityRanges":[{"offset":41,"length":5,"key":0},{"offset":51,"length":2,"key":1}],"data":[]}]}

androidendFillColor?: color

有时候scrollview会占用比内容填充更多的空间。当这种情况发生时，这个道具将用一种颜色填充剩余的滚动视图，以避免设置背景和创建不必要的透支。这是一般情况下不需要的高级优化。

androidoverScrollMode?: enum('auto', 'always', 'never')

用于覆盖overScroll模式的默认值。

可能的值：

• 'auto' - 默认值，只有当内容足够大才能有意义滚动时，才允许用户过度滚动此视图。

• 'always' - 始终允许用户过度滚动此视图。

• 'never' - 绝不允许用户过度滚动此视图。

androidscrollPerfTag?: string

用于在此滚动视图上记录滚动性能的标签。将强制动态事件启用（请参阅sendMomentumEvents）。这并没有做任何事情，你需要实现一个自定义的本地FpsListener，它是有用的。

iosDEPRECATED_sendUpdatedChildFrames?: bool

如果为true，则ScrollView将在滚动事件中发出updateChildFrames数据，否则将不计算或发出子帧数据。这只是为了支持遗留问题，onLayout应该用来检索帧数据。默认值是false。

iosalwaysBounceHorizontal?: bool

如果为true，则即使内容小于滚动视图本身，滚动视图也会在到达结尾时进行水平反弹。默认值为true horizontal={true}，否则为false。

iosalwaysBounceVertical?: bool

如果为true，那么即使内容小于滚动视图本身，滚动视图也会在到达结尾时垂直弹出。默认值在false时为false horizontal={true}，否则为true。

iosautomaticallyAdjustContentInsets?: bool

控制iOS是否应自动调整置于导航栏或选项卡栏/工具栏后面的滚动视图的插入内容。默认值是true。

iosbounces?: bool

当为true时，如果内容大于沿滚动方向轴的滚动视图，则滚动视图在到达内容末尾时会弹起。如果为false，则即使alwaysBounce*道具为真，也会禁用所有弹跳。默认值是true。

iosbouncesZoom?: bool

如果设置为true，则手势可以使变焦超过最小/最大值，变焦将变为手势结束时的最小/最大值，否则变焦不会超出限制。

ioscanCancelContentTouches？： bool

如果为false，则一旦开始跟踪，如果触摸移动，则不会尝试拖动。默认值是true。

ioscenterContent?: bool

如果为true，则当内容小于滚动视图边界时，滚动视图自动将内容居中; 当内容大于滚动视图时，此属性不起作用。默认值是false。

ioscontentInset?: {top: number, left: number, bottom: number, right: number}

滚动视图内容从滚动视图的边缘插入的量。默认为{top: 0, left: 0, bottom: 0, right: 0}。

ioscontentInsetAdjustmentBehavior?: enum('automatic', 'scrollableAxes', 'never', 'always')

此属性指定如何使用安全区域插入修改滚动视图的内容区域。该属性的默认值是“never”。适用于iOS 11及更高版本。

ioscontentOffset?: PointPropType

用于手动设置开始滚动偏移量。默认值是{x: 0, y: 0}。

iosdecelerationRate?: enum('fast', 'normal'), number

一个浮点数，用于确定用户抬起手指后滚动视图的减速速度。你也可以使用字符串快捷键"normal"以及"fast"用于匹配其底层的iOS设置UIScrollViewDecelerationRateNormal和UIScrollViewDecelerationRateFast分别。

• 'normal': 0.998 (the default)

• 'fast': 0.99

iosdirectionalLockEnabled?: bool

如果为true，则ScrollView将尝试在拖动时锁定为垂直或水平滚动。默认值是false。

iosindicatorStyle?: enum('default', 'black', 'white')

滚动指标的风格。

• 'default' (the default), same as black.

• 'black'，滚动指示器是黑色的。这种风格在浅色背景下很好。

• 'white'，滚动指示器是白色的。这种风格在黑暗背景下很好。

iosmaximumZoomScale?: number

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

iosminimumZoomScale?: number

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

iospinchGestureEnabled?: bool

如果为true，则ScrollView允许使用捏手势来放大和缩小。默认值是true。

iosscrollEventThrottle?: number

这将控制滚动时滚动事件发生的频率（以毫秒为单位的时间间隔）。数字越小，跟踪滚动位置的代码的精度越高，但由于通过网桥发送的信息量会导致滚动性能问题。JS运行循环同步到屏幕刷新率时，您不会注意到1-16之间的值有所不同。如果您不需要精确的滚动位置跟踪，请将此值设置得较高以限制通过网桥发送的信息。默认值为零，这会导致每次滚动视图时滚动事件仅发送一次。

iosscrollIndicatorInsets?: {top: number, left: number, bottom: number, right: number}

滚动视图指示符从滚动视图边缘插入的量。这通常应该设置为与contentInset。的值相同的值。默认为{0, 0, 0, 0}。

iosscrollsToTop?: bool

如果为true，则当点击状态栏时，滚动视图会滚动到顶部。默认值是true。

iossnapToAlignment?: enum('start', 'center', 'end')

当snapToInterval被设置时，snapToAlignment将定义捕捉到滚动视图的关系。

• 'start' （默认）将对齐左侧（水平）或顶部（垂直）

• 'center' 将对齐中心的捕捉

• 'end' 将对齐右侧（水平）或底部（垂直）

iossnapToInterval?: number

设置时，会导致滚动视图以值的倍数停止snapToInterval。这可以用于通过长度小于滚动视图的子项进行分页。通常与snapToAlignment和组合使用decelerationRate="fast"。覆盖较少配置的pagingEnabled道具。

ioszoomScale?: number

滚动视图内容的当前比例。默认值是1.0。

方法

scrollTo(y?: number, object, x?: number, animated?: boolean)

滚动到给定的x，y偏移量，立即或平滑动画。

例：

scrollTo{x: 0, y: 0, animated: true})

注意：奇怪的函数签名是由于历史原因，该函数也接受单独的参数作为options对象的替代。由于含糊不清（y之前的y）而不推荐使用，且不应使用。

scrollToEnd(options?: object)

如果这是一个垂直ScrollView滚动到底部。如果这是一个水平滚动视图向右滚动。

使用scrollToEnd{animated: true})平滑滚动动画，scrollToEnd{animated: false})即时滚动。如果没有选项通过，则animated默认为true。

scrollWithoutAnimationTo(y, x)

已弃用，请scrollTo改用。

flashScrollIndicators()

瞬间显示滚动指示器。