ReactNative 进阶（⼆⼗五）：ScrollView 滚动视图组件详解
⽂章⽬录
⼀、概述
ScrollView 在Android 和ios 原⽣开发中都⽐较常见，是⼀个滚动视图控件。在RN开发中，系统也给我们提供了这么⼀个控件。不过在RN开
reactnative开发发中 ，使⽤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)
如果当前界⾯有软键盘，那么点击scrollview后是否收起键盘，取决于本
属性的设置。
onContentSizeChange
function 此⽅法是通过绑定在内容容器上的onLayout来实现的。onScroll
function
在滚动的过程中，每帧最多调⽤⼀次此回调函数。
pagingEnabled bool
当值为true时，滚动条会停在滚动视图的尺⼨的整数倍位置。这个可以⽤
在⽔平分页上。默认值为false。
refreshControl element
指定组件，⽤于为ScrollView提供下拉刷新功能。只能⽤于垂直视图，
即horizontal 不能为true 。
removeClippedSubviews bool
当此属性为true时，屏幕之外的⼦视图（⼦视图的overflow样式需要设为
hidden）会被移除。
scrollEnabled
bool 当值为false的时候，内容不能滚动，默认值为true。showsHorizontalScrollIndicator bool 当此属性为true的时候，显⽰⼀个⽔平⽅向的滚动条。showsVerticalScrollIndicator
bool
当此属性为true的时候，显⽰⼀个垂直⽅向的滚动条。
horizontal
当此属性为true的时候，所有的的⼦视图会在⽔平⽅向上排成⼀⾏，⽽不是默认的在垂直⽅向上排成⼀列。默认值为false keyboardDismissMode
⽤户拖拽滚动视图的时候，是否要隐藏软键盘。
<ScrollView style ={styles .scrollViewStyle }horizontal ={true }>  {this .renderItem ()}</ScrollView >
123
none （默认值），拖拽时不隐藏软键盘;on-drag  当拖拽开始的时候隐藏软键盘;
interactive  软键盘伴随拖拽操作同步地消失，并且如果往上滑动会恢复键盘。安卓设备上不⽀持这个选项，会表现的和none ⼀样。
endFillColor
有时候滚动视图会占据⽐实际内容更多的空间。这种情况下可以使⽤此属性，指定以某种颜⾊来填充多余的空间，以避免设置背景和创建不必要的绘制开销。⼀般情况下并不需要这种⾼级优化技巧。
alwaysBounceHorizontal
当此属性为true时，⽔平⽅向即使内容⽐滚动视图本⾝还要⼩，也可以弹性地拉动⼀截。（前提是horizontal设置为true）
automaticallyAdjustContentInsets
如果滚动视图放在⼀个导航条或者⼯具条后⾯的时候，iOS 系统是否要⾃动调整内容的范围。默认值为true。（译注：如果你的ScrollView 或ListView 的头部出现莫名其妙的空⽩，尝试将此属性置为false）
bounces
<ScrollView style ={styles .scrollViewStyle }        horizontal ={true }
alwaysBounceHorizontal ={true }>
{this .renderItem ()}</ScrollView >
123456

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。