本文共 6185 字，大约阅读时间需要 20 分钟。

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 number

pagingEnabled:当值为true时，滚动条会停在滚动视图的尺寸的整数倍位置。这个可以用在水平分页上。默认值为false。比如我们滚动到多余半个屏幕的时候松手，控件会自动滚到下一页的位置。 
scrollEnabled:是否可以滚动 
scrollTo : (y: number | { x?: number, y?: number, animated?: boolean }, x: number, animated: boolean) 
滚动到指定的x, y偏移处。第三个参数为是否启用平滑滚动动画。 
scrollToEnd: 滚动到视图底部（水平方向的视图则滚动到最右边）scrollToEnd({animated: true})则启用平滑滚动动画

Demo

import React, {Component} from 'react';import {    StyleSheet,    View,    Text,    ScrollView,    TextInput,    ToastAndroid,    Button,} from 'react-native';export default class ScrollViewDemo extends Component {
       state = {        data:['第1个', '第2个', '第3个', '第4个', '第5个', '第6个', '第7个', '第8个', '第9个', '第10个'],    }    _scroll;    render() {        return (            
                   
    {                    this.setState({                        data:['第11个', '第12个', '第13个', '第14个', '第15个', '第16个', '第17个', '第18个', '第19个', '第20个','第21个'],                    });                }}>                
    {                    this._scroll.scrollTo({
  y:100});                }}/>                
    {                    this._scroll.scrollToEnd();                }}/>                
     
      this._scroll = scroll}                    style={
  {
  borderColor:'red',borderWidth:2}}                    contentContainerStyle={
  {
  paddingLeft:20,paddingTop:20,paddingRight:20}}                    keyboardDismissMode='on-drag'                    keyboardShouldPersistTaps='never'                    showsVerticalScrollIndicator={
  true}                    scrollEnabled={
  true}                    pagingEnabled={
  true}                    horizontal={
  false}                    onContentSizeChange={
  (contentWidth, contentHeight)=>{                        var msg = 'onContentSizeChange:'+contentWidth+','+contentHeight;                        ToastAndroid.show(msg,ToastAndroid.SHORT);                    }}                onScroll={
  (e)=>{                    console.warn('onScroll');                }}>                    
      
       悬浮在顶部
                          
                          {                        this.state.data.map((item, index) => {                            var color = index * 23 + 10;                            return 
      
       {item}
                              })                    }                
                         );    }}const styles = StyleSheet.create({    text: {        height: 200,        textAlign: 'center',        textAlignVertical: 'center',        color: 'red',        fontSize: 30    }}) 
 
  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);    //这个没有动画效果

先说明一下使用背景吧==>用ScrollView写的一个页面,页面底部有一个下一篇按钮,但是点击按钮重新render之后,页面依旧在底部,没有自动跳到顶部,视觉效果很差http://blog.csdn.net/weixin_38289699/article/details/71218791

解决的方法是在ScrollView的标签中加入相当于类名的属性

其中的ref='totop',==>ref相当于锚点的id属性,'totop'是随意的命名,相当于类名

在调用这个方法的组件中这样书写

在点击调用的方法getPrevious()中

getPrevious(){

}

项目中的整体方法比较复杂,这里简单把功能写出来了,大家参考下.

简单理解就是ref的一些属性控制的,大家可以看一下ref的详解.