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

最后

由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

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

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



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


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

<ScrollView style={styles.scrollViewStyle}
horizontal={true}
alwaysBounceHorizontal={true}

{this.renderItem()}

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

<ScrollView style={styles.scrollViewStyle}
bounces={false}

{this.renderItem()}

* `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`。

{this.renderItem()}

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

<ScrollView style={styles.scrollViewStyle}
scrollEnabled={false}

{this.renderItem()}

* `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()}

* `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()}

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


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


#### 2.1 Style




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


### 最后：

总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。

面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

![](https://img-blog.csdnimg.cn/img_convert/2e373c541d416b165b17659d55f00920.webp?x-oss-process=image/format,png)

临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

[外链图片转存中...(img-mW55RdTz-1715793827359)]