ReactNative进阶（二十五）：ScrollView 滚动视图组件详解_react native scrollview

文章目录

• • 一、概述
    • 二、属性
    • • 2.1 Style
        • 2.2 方法
        • • 2.2.1 scrollTo()
            • 2.2.2 crollToEnd()
    • 三、拓展阅读

---

一、概述

ScrollView在Android和ios原生开发中都比较常见，是一个滚动视图控件。在RN开发中，系统也给我们提供了这么一个控件。不过在RN开发中 ，使用ScrollView必须有一个确定的高度才能正常工作，因为它实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器（通过滚动操作）。 所以，要给一个ScrollView确定一个高度的话，要么直接给它设置高度（不建议），要么所有的父容器都有确定的高度。一般来说我们会给 ScrollView 设置 flex: 1， 以使其自动填充父容器的空余空间，但前提条件是所有的父容器本身也设置了flex或者指定了高度，否则就会导致无法正常滚动，你可以使用元素查看器来查找具体哪一层高度不正确。

二、属性

name	type	desc
alwaysBounceVertical	bool	当此属性为true时，垂直方向即使内容比滚动视图本身还要小，也可以弹性地拉动一截。(ios)
contentContainerStyle	StyleSheetPropType(View Style props)	样式会应用到一个内层的内容容器上，所有的子视图都会包裹在内容容器内。
keyboardShouldPersistTaps	enum(‘always’, ‘never’, ‘handled’, false, true)