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

淡淡的烟草味﹌ 2023-01-20 10:54 154阅读 0赞

### 文章目录 ###

*   *  概述
     *  属性
     *  Style
     *  方法
     *   *  scrollTo()
         *  scrollToEnd()
     *  拓展阅读

--------------------

## 概述 ##

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

## 属性 ##

<table> 
 <thead> 
  <tr> 
   <th align="center">name</th> 
   <th align="center">type</th> 
   <th align="center">desc</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">alwaysBounceVertical</td> 
   <td align="center">bool</td> 
   <td align="center">当此属性为true时，垂直方向即使内容比滚动视图本身还要小，也可以弹性地拉动一截。(ios)</td> 
  </tr> 
  <tr> 
   <td align="center">contentContainerStyle</td> 
   <td align="center">StyleSheetPropType(View Style props)</td> 
   <td align="center">样式会应用到一个内层的内容容器上，所有的子视图都会包裹在内容容器内。</td> 
  </tr> 
  <tr> 
   <td align="center">keyboardShouldPersistTaps</td> 
   <td align="center">enum(‘always’, ‘never’, ‘handled’, false, true)</td> 
   <td align="center">如果当前界面有软键盘，那么点击scrollview后是否收起键盘，取决于本属性的设置。</td> 
  </tr> 
  <tr> 
   <td align="center">onContentSizeChange</td> 
   <td align="center">function</td> 
   <td align="center">此方法是通过绑定在内容容器上的onLayout来实现的。</td> 
  </tr> 
  <tr> 
   <td align="center">onScroll</td> 
   <td align="center">function</td> 
   <td align="center">在滚动的过程中，每帧最多调用一次此回调函数。</td> 
  </tr> 
  <tr> 
   <td align="center">pagingEnabled</td> 
   <td align="center">bool</td> 
   <td align="center">当值为true时，滚动条会停在滚动视图的尺寸的整数倍位置。这个可以用在水平分页上。默认值为false。</td> 
  </tr> 
  <tr> 
   <td align="center">refreshControl</td> 
   <td align="center">element</td> 
   <td align="center">指定<a href="https://reactnative.cn/docs/refreshcontrol" rel="nofollow">RefreshControl</a>组件，用于为ScrollView提供下拉刷新功能。只能用于垂直视图，即<code>horizontal</code>不能为<code>true</code>。</td> 
  </tr> 
  <tr> 
   <td align="center">removeClippedSubviews</td> 
   <td align="center">bool</td> 
   <td align="center">当此属性为true时，屏幕之外的子视图（子视图的overflow样式需要设为hidden）会被移除。</td> 
  </tr> 
  <tr> 
   <td align="center">scrollEnabled</td> 
   <td align="center">bool</td> 
   <td align="center">当值为false的时候，内容不能滚动，默认值为true。</td> 
  </tr> 
  <tr> 
   <td align="center">showsHorizontalScrollIndicator</td> 
   <td align="center">bool</td> 
   <td align="center">当此属性为true的时候，显示一个水平方向的滚动条。</td> 
  </tr> 
  <tr> 
   <td align="center">showsVerticalScrollIndicator</td> 
   <td align="center">bool</td> 
   <td align="center">当此属性为true的时候，显示一个垂直方向的滚动条。</td> 
  </tr> 
 </tbody> 
</table>

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

<ScrollView style={ styles.scrollViewStyle}horizontal={ true}>
       { this.renderItem()}
    </ScrollView>

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

>  *  `none`（默认值），拖拽时不隐藏软键盘;
>  *  `on-drag` 当拖拽开始的时候隐藏软键盘;
>  *  `interactive` 软键盘伴随拖拽操作同步地消失，并且如果往上滑动会恢复键盘。安卓设备上不支持这个选项，会表现的和`none`一样。

*  `endFillColor`  
    有时候滚动视图会占据比实际内容更多的空间。这种情况下可以使用此属性，指定以某种颜色来填充多余的空间，以避免设置背景和创建不必要的绘制开销。一般情况下并不需要这种高级优化技巧。
 *  `alwaysBounceHorizontal`  
    当此属性为true时，水平方向即使内容比滚动视图本身还要小，也可以弹性地拉动一截。（前提是horizontal设置为true）

<ScrollView style={ styles.scrollViewStyle}
             horizontal={ true}
            alwaysBounceHorizontal={ true}
    >
    { this.renderItem()}
    </ScrollView>

*  `automaticallyAdjustContentInsets`  
    如果滚动视图放在一个导航条或者工具条后面的时候，`iOS`系统是否要自动调整内容的范围。默认值为true。（译注：如果你的`ScrollView`或`ListView`的头部出现莫名其妙的空白，尝试将此属性置为false）
 *  `bounces`  
    当值为`true`时，如果内容范围比滚动视图本身大，在到达内容末尾的时候，可以弹性地拉动一截。如果为`false`，尾部的所有弹性都会被禁用，即使`alwaysBounce`\*属性为true。默认值为true。

<ScrollView style={ styles.scrollViewStyle}
             bounces={ false}
     >
     { this.renderItem()}
    </ScrollView>

*  bouncesZoom  
    当值为true时，使用手势缩放内容可以超过`min/max`的限制，然后在手指抬起之后弹回`min/max`的缩放比例。否则的话，缩放不能超过限制。
 *  canCancelContentTouches  
    当值为false时，一旦有子节点响应触摸操作，即使手指开始移动也不会拖动滚动视图。默认值为true（在以上情况下可以拖动滚动视图）。
 *  centerContent  
    当值为true时，如果滚动视图的内容比视图本身小，则会自动把内容居中放置。当内容比滚动视图大的时候，此属性没有作用。默认值为false。
 *  `contentInset`  
    `{top: number, left: number, bottom: number, right: number}`内容范围相对滚动视图边缘的坐标。默认为\{0, 0, 0, 0\}。
 *  `contentOffset`  
    用来手动设置初始的滚动坐标。默认值为`{x: 0, y: 0}`。
 *  `decelerationRate`  
    一个浮点数，用于决定当用户抬起手指之后，滚动视图减速停下的速度。常见的选项有：

>  *  Normal: 0.998 (默认值)
>  *  Fast: 0.9

*  `directionalLockEnabled`  
    当值为真时，滚动视图在拖拽的时候会锁定只有垂直或水平方向可以滚动。默认值为`false`。
 *  `maximumZoomScale`  
    允许的最大缩放比例。默认值为1.0
 *  `minimumZoomScale`  
    允许的最小缩放比例。默认值为1.0
 *  pagingEnabled  
    当值为true时，滚动条会停在滚动视图的尺寸的整数倍位置。这个可以用在水平分页上。默认值为`false`。

<ScrollView style={ styles.scrollViewStyle}
                horizontal={ true}
                pagingEnabled={ true}
        >
        { this.renderItem()}
    </ScrollView>

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

<ScrollView style={ styles.scrollViewStyle}
           scrollEnabled={ false}
    >
    { this.renderItem()}
    </ScrollView>

*  `scrollEventThrottle`  
    这个属性控制在滚动过程中，`scroll`事件被调用的频率（单位是每秒事件数量）。更大的数值能够更及时的跟踪滚动位置，不过可能会带来性能问题，因为更多的信息会通过`bridge`传递。默认值为0，意味着每次视图被滚动，scroll事件只会被调用一次。
 *  `scrollIndicatorInsets`  
    `{top: number, left: number, bottom: number, right: number}`决定滚动条距离视图边缘的坐标。这个值应该和contentInset一样。默认值为`{0, 0, 0, 0}`。
 *  `scrollsToTop`  
    当此值为true时，点击状态栏的时候视图会滚动到顶部。默认值为true。

<ScrollView style={ styles.scrollViewStyle}
            scrollsToTop={ true}
    >
    { this.renderItem()}
    </ScrollView>

*  `snapToAlignment`  
    `enum(‘start’, “center”, ‘end’)`当设置了`snapToInterval`，`snapToAlignment`会定义停驻点与滚动视图之间的关系。

>  *  `start` (默认) 会将停驻点对齐在左侧（水平）或顶部（垂直）
>  *  `center` 会将停驻点对齐到中间
>  *  `end` 会将停驻点对齐到右侧（水平）或底部（垂直）

*  `snapToInterval`  
    当设置了此属性时，会让滚动视图滚动停止后，停止在 `snapToInterval` 的倍数的位置。这可以在一些子视图比滚动视图本身小的时候用于实现分页显示 `snapToAlignment` 组合使用。
 *  `stickyHeaderIndices`  
    一个子视图下标的数组，用于决定哪些成员会在滚动之后固定在屏幕顶端。举个例子，传递 `stickyHeaderIndices={[0]}` 会让第一个成员固定在滚动视图顶端。这个属性不能和 `horizontal={true}` 一起使用。

<ScrollView style={ styles.scrollViewStyle}
               stickyHeaderIndices={ [0]}
       >
       { this.renderItem()}
    </ScrollView>

*  `zoomScale`  
    滚动视图内容初始的缩放比例。默认值为1.0；
 *  `onMomentumScrollEnd`  
    当一帧滚动完毕的时候调用，通过 `e.nativeEvent.contentOffset` 获取偏移量；
 *  `onScrollBeginDrag`  
    当开始手动拖拽的时候调用；
 *  `onScrollEndDrag`  
    当结束手动拖拽的时候调用；
 *  `onScrollAnimationEnd`  
    当滚动动画结束之后调用此回调；
 *  `onContentSizeChange`  
    此函数会在`ScrollView`内部可滚动内容的视图发生变化时调用；

调用参数为内容视图的宽和高: (contentWidth, contentHeight)  
此方法是通过绑定在内容容器上的onLayout来实现的。

## Style ##

<table> 
 <thead> 
  <tr> 
   <th align="center">name</th> 
   <th align="center">type</th> 
   <th align="center">desc</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">backfaceVisibility</td> 
   <td align="center">[‘visible’, ‘hidden’]</td> 
   <td align="center">隐藏或者显示</td> 
  </tr> 
  <tr> 
   <td align="center">backgroundColor</td> 
   <td align="center">color</td> 
   <td align="center">背景色</td> 
  </tr> 
  <tr> 
   <td align="center">borderBottomLeftRadius</td> 
   <td align="center">number</td> 
   <td align="center">左下角圆角大小</td> 
  </tr> 
  <tr> 
   <td align="center">borderBottomRightRadius</td> 
   <td align="center">number</td> 
   <td align="center">右下角圆角大小</td> 
  </tr> 
  <tr> 
   <td align="center">borderColor</td> 
   <td align="center">color</td> 
   <td align="center">边框颜色</td> 
  </tr> 
  <tr> 
   <td align="center">borderRadius</td> 
   <td align="center">number</td> 
   <td align="center">边框圆角</td> 
  </tr> 
  <tr> 
   <td align="center">borderTopLeftRadius</td> 
   <td align="center">number</td> 
   <td align="center">左上角圆角大小</td> 
  </tr> 
  <tr> 
   <td align="center">borderTopRightRadius</td> 
   <td align="center">number</td> 
   <td align="center">右下角圆角大小</td> 
  </tr> 
  <tr> 
   <td align="center">borderWidth</td> 
   <td align="center">number</td> 
   <td align="center">边框宽度</td> 
  </tr> 
  <tr> 
   <td align="center">opacity</td> 
   <td align="center">[0.0-1.0]</td> 
   <td align="center">设置透明度</td> 
  </tr> 
  <tr> 
   <td align="center">overflow</td> 
   <td align="center">[‘visible’, ‘hidden’]</td> 
   <td align="center">设置图片尺寸超过容器可以设置显示或者隐藏</td> 
  </tr> 
  <tr> 
   <td align="center">androidelevation</td> 
   <td align="center">number</td> 
   <td align="center">android5.0以上有的，立体阴影效果</td> 
  </tr> 
 </tbody> 
</table>

## 方法 ##

### scrollTo() ###

scrollTo(
      ([y]: number),
      object,
      ([x]: number),
      ([animated]: boolean),
      ([duration]: number),
    );

滚动到指定的x, y偏移处。第三个参数为是否启用平滑滚动动画。还有一个`duration`参数则是仅限`android`可以使用的滚动持续时间。

示例：

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

指定滚动持续时间的示例(仅限Android):

scrollTo({ x: 0, y: 0, duration: 500})

### scrollToEnd() ###

scrollToEnd(([options]: { animated: boolean, duration: number}));

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

加上动画参数 `scrollToEnd({animated: true})` 则启用平滑滚动动画，或是调用`scrollToEnd({animated: false})` 来立即跳转。

## 拓展阅读 ##

*  《[ReactNative进阶（四十一）：应用FlatList实现分组列表][ReactNative_FlatList]》
 *  《[ReactNative进阶（四十）：应用ListView实现分组列表][ReactNative_ListView]》
 *  《[ReactNative进阶（三十七）：应用SectionList实现分组列表][ReactNative_SectionList]》
 *  《[ReactNative进阶（十九）：React Native按钮Touchable系列组件使用详解][ReactNative_React Native_Touchable]》
 *  《[ReactNative进阶（十七）：RefreshControl组件实现刷新效果][ReactNative_RefreshControl]》
 *  《[ReactNative进阶（十五）：react-native-tab-navigator实现底部导航栏][ReactNative_react-native-tab-navigator]》
 *  《[ReactNative进阶（十）：网页组件（WebView）的使用详解][ReactNative_WebView]》

[ReactNative_FlatList]: https://shq5785.blog.csdn.net/article/details/117450885
[ReactNative_ListView]: https://shq5785.blog.csdn.net/article/details/117450046
[ReactNative_SectionList]: https://shq5785.blog.csdn.net/article/details/117442118
[ReactNative_React Native_Touchable]: https://shq5785.blog.csdn.net/article/details/116596148
[ReactNative_RefreshControl]: https://shq5785.blog.csdn.net/article/details/116587417
[ReactNative_react-native-tab-navigator]: https://shq5785.blog.csdn.net/article/details/116498286
[ReactNative_WebView]: https://shq5785.blog.csdn.net/article/details/116158130