ScrollView 是一个滚动控件,当内容显示不全时可以通过滚动显示。
属性:
View props… :View的所有属性
contentContainerStyle:内容容器的样式,所有的子视图都会包裹在内容容器内。
horizontal:为true时,横向滚动
keyboardDismissMode :用户拖拽滚动视图的时候,是否要隐藏软键盘。none(默认值):拖拽时不隐藏软键盘。
on-drag :当拖拽开始的时候隐藏软键盘。
interactive: 软键盘伴随拖拽操作同步地消失,并且如果往上滑动会恢复键盘。安卓设备上 不支持这个选项,会表现的和none一样。keyboardShouldPersistTaps: 如果当前界面有软键盘,那么点击scrollview后是否收起键盘
never(默认值):点击TextInput以外的子组件会使当前的软键盘收起。此时子元素不会收到点击事件。
always:键盘不会自动收起,ScrollView也不会捕捉点击事件,但子组件可以捕获。
handled:当点击事件被子组件捕获时,键盘不会自动收起。这样切换TextInput时键盘可以保持状态。多数带有TextInput的情况下你应该选择此项。
false:已过期,请使用’never’代替。
true:已过期,请使用’always’代替。onContentSizeChange:ScrollView内部可滚动内容的视图发生变化时调用,参数为内容视图的宽和高
onScroll:滚动的过程中,每帧最多调用一次此回调函数
refreshControl:可以进行指定RefreshControl组件。这样可以为ScrollView添加下拉刷新的功能.
showsHorizontalScrollIndicator:显示水平滚动条
showsVerticalScrollIndicator:显示垂直滚动条
style:样式属性Flexbox…
ShadowProp#style…
Transforms…
backfaceVisibility enum(‘visible’, ‘hidden’)
backgroundColor string
borderColor string
borderTopColor string
borderRightColor string
borderBottomColor string
borderLeftColor string
borderRadius number
borderTopLeftRadius number
borderTopRightRadius number
borderBottomLeftRadius number
borderBottomRightRadius number
borderStyle enum(‘solid’, ‘dotted’, ‘dashed’)
borderWidth number
borderTopWidth number
borderRightWidth number
borderBottomWidth number
borderLeftWidth number
opacity number
overflow enum(‘visible’, ‘hidden’)
shadowColor string
shadowOffset {width: number, height: number}
shadowOpacity number
shadowRadius numberpagingEnabled:当值为true时,滚动条会停在滚动视图的尺寸的整数倍位置。这个可以用在水平分页上。默认值为false。比如我们滚动到多余半个屏幕的时候松手,控件会自动滚到下一页的位置。
scrollEnabled:是否可以滚动
scrollTo : (y: number | { x?: number, y?: number, animated?: boolean }, x: number, animated: boolean)
滚动到指定的x, y偏移处。第三个参数为是否启用平滑滚动动画。
scrollToEnd: 滚动到视图底部(水平方向的视图则滚动到最右边)scrollToEnd({animated: true})则启用平滑滚动动画
Demo
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
效果图
/
页面中有个ScrollView,点击某个Button,跳到ScrollView的顶部。
可以参考以下例子:
<ScrollView ref={component => this._scrollView = component} />
//this._scrollView.scrollTo(0, 0); 这个有动画效果
this._scrollView.scrollWithoutAnimationTo(0,0); //这个没有动画效果
React Native 之 ScrollView的翻到顶部功能
先说明一下使用背景吧==>用ScrollView写的一个页面,页面底部有一个下一篇按钮,但是点击按钮重新render之后,页面依旧在底部,没有自动跳到顶部,视觉效果很差http://blog.csdn.net/weixin_38289699/article/details/71218791
解决的方法是在ScrollView的标签中加入相当于类名的属性
其中的ref='totop',==>ref相当于锚点的id属性,'totop'是随意的命名,相当于类名
在调用这个方法的组件中这样书写
在点击调用的方法getPrevious()中
getPrevious(){
}
项目中的整体方法比较复杂,这里简单把功能写出来了,大家参考下.
简单理解就是ref的一些属性控制的,大家可以看一下ref的详解.