(一)前言

【好消息】个人网站已经上线运行,后面博客以及技术干货等精彩文章会同步更新，请大家关注收藏:http://www.lcode.org

今天我们一起来看一下滚动视图ScrollView组件的介绍和使用讲解。

刚创建的React Native技术交流1群(282693535),React Native交流2群:(496601483)，请不要重复加群！欢迎各位大牛,React Native技术爱好者加入交流!同时博客左侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!

该组件封装了Android平台的ScrollView(滚动视图)组件，并且提供触摸事件"responder"系统功能。使用ScrollViews的时候我们必须要去确保该有一个固定的高度，因为该其实就是包含很多不固定高度的字控件装入到固定的容器中(通过滑动交互)。如果我们要给ScrollView进行设置高度的话，要么我们直接给该ScrollView进行设置高度(注意该方法不建议哦)。另外一种方法是就是该ScrollView的父控件设置相关高度。使用第二种方法ScrollView中是不能加{flex:1},不然不会有效果的。

(二)官方实例

首先我们来看一下官方的实例代码,不过该代码整体封装性比较强，可能对于初学者来说初看起来还是有点问题的，不过后面我会写一个例子的，具体代码如下:


"use strict";
var React =require("react-native");
var {
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity
} = React;
 
var NUM_ITEMS = 20;
 
var ScrollViewSimpleExample = React.createClass({
  statics: {
    title: "<ScrollView>",
    description: "Component that enablesscrolling through child components."
  },
  makeItems: function(nItems: number, styles):Array<any> {
    var items = [];
    for (var i = 0; i < nItems; i++) {
       items[i] = (
         <TouchableOpacity key={i} style={styles}>
           <Text>{"Item " +i}</Text>
         </TouchableOpacity>
       );
    }
    return items;
  },
 
  render: function() {
    // One of the items is a horizontal scrollview
    var items = this.makeItems(NUM_ITEMS,styles.itemWrapper);
    items[4] = (
      <ScrollView key={"scrollView"} horizontal={true}>
        {this.makeItems(NUM_ITEMS,[styles.itemWrapper, styles.horizontalItemWrapper])}
      </ScrollView>
    );
 
    var verticalScrollView = (
      <ScrollViewstyle={styles.verticalScrollView}>
        {items}
      </ScrollView>
    );
 
    return verticalScrollView;
  }
});
 
var styles =StyleSheet.create({
  verticalScrollView: {
    margin: 10,
  },
  itemWrapper: {
    backgroundColor: "#dddddd",
    alignItems: "center",
    borderRadius: 5,
    borderWidth: 5,
    borderColor: "#a52a2a",
    padding: 30,
    margin: 5,
  },
  horizontalItemWrapper: {
    padding: 50
  }
});
module.exports =ScrollViewSimpleExample;

运行效果如下图：

(三)属性方法(这边只关注通用以及Android平台的)

3.1.View相关属性样式全部继承(例如:宽和高,背景颜色,边距等相关属性样式)

3.2.contentContainerStyle 样式风格属性(传入StyleSheet创建的Style文件)。该样式会作用于被ScrollView包裹的所有的子视图。实例如下:


return (
      <ScrollView contentContainerStyle={styles.contentContainer}> </ScrollView>
      );
   …
 var styles = StyleSheet.create({
          contentContainer:{
                   paddingVertical:20
               }
         });

3.3.horizontal 表示ScrollView是横向滑动还是纵向滑动。该默认为false表示纵向滑动

3.4.keyboardDismissMode 枚举类型表示键盘隐藏类型，可选值("none", "interactive", "on-drag") 三个值的意义分别如下:

none 默认值，表示在进行拖拽滑动的时候不隐藏键盘
on-drag 表示在进行拖拽滑动开始的时候隐藏键盘
interactive 表示当拖拽触摸移动的同时隐藏键盘，向上拖拽的时候取消隐藏。不过在Android平台上面该选项不支持，所以会和"none"一样的效果。

3.5.keyboardShouldPersistTaps 该属性默认为false，表示如果当前是textinput控件，并且键盘是弹出状态的话，点击textinput之外地方，会进行隐藏键盘。反之不会有效果，键盘还是成打开状态。

3.6.onContentSizeChange function 该当滚动视图的内容尺寸大小发生变化的时候进行调用

3.7.onScroll function 该方法在滚动的时候每frame(帧)调用一次。该方法事件调用的频率可以使用scrollEventThrottle属性进行设置。

3.8.refreshControl element 设置元素控件，该可以进行指定RefreshControl组件。这样可以为ScrollView添加下拉刷新的功能.

3.9.removeClippedSubviews 测试属性当该值为true的时候。在ScrollView视图之外的视图(该视图的overflow属性值必须要为hidden)会从被暂时移除，该设置可以提高滚动的性能。

3.10.showsHorizontalScrollIndicator 该值设置是否需要显示横向滚动指示条

3.11.showsVerticalScrollIndicator 该值设置是否需要显示纵向滚动指示条

3.12.sendMomentumEvents 当ScrollView有onMomentumScrollBegin或者onMomentumScrollEnd方法设置，该sendMomentumEvents值设置为true的时候。变化的事件信息会通过该Android框架自动发送出来，然后之前设置的方法进行捕捉。

生下来的其他属性方法都只适合于iOS平台，这边暂时不做相关讲解。具体请点击查看官方文档

(四)风格样式

对于风格样式这块，其实和View视图中差不多的，大家可以点击进行查看View组件的介绍和详解文章

Flexbox...
ShadowPropTypesIOS#style…
Transforms...
backfaceVisibility enum("visible", "hidden")
backgroundColor color
borderBottomColor color
borderBottomLeftRadius number
borderBottomRightRadius number
borderBottomWidth number
borderColor color
borderLeftColor color
borderLeftWidth number
borderRadius number
borderRightColor color
borderRightWidth number
borderStyle enum("solid", "dotted", "dashed")
borderTopColor color
borderTopLeftRadius number
borderTopRightRadius number
borderTopWidth number
borderWidth number
opacity number
overflow enum("visible", "hidden")

(五)使用实例

以上我们对于ScrollView的介绍以及相关属性方法以及样式做了一定的介绍，下面我们来写一个比较简单的实例，来演示一下该ScrollView控件的基本使用。实例代码如下:


/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
"use strict";
import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View,
  ScrollView,
} from"react-native";
 
class ListViewDemo extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
           进行测试ScrollView控件
        </Text>
         <ScrollView showsVerticalScrollIndicator={true}
             contentContainerStyle={styles.contentContainer}>
            <Text
           style={{color:"#FFF",margin:5,fontSize:16,backgroundColor:"blue"}}>
                Shake or press menu button fordev menuShake or press menu button for dev menu
                Shake or press menu button fordev menuShake or press menu button for dev menu
                Shake or press menu button fordev menuShake or press menu button for dev menu
                Shake or press menu button fordev menuShake or press menu button for dev menu
                Shake or press menu button fordev menuShake or press menu button for dev menu
                Shake or press menu button fordev menuShake or press menu button for dev menu
                Shake or press menu button fordev menuShake or press menu button for dev menu
                Shake or press menu button fordev menuShake or press menu button for dev menu
                Shake or press menu button fordev menuShake or press menu button for dev menu
                Shake or press menu button fordev menuShake or press menu button for dev menu
                Shake or press menu button fordev menuShake or press menu button for dev menu
                Shake or press menu button fordev menuShake or press menu button for dev menu
                Shake or press menu button fordev menuShake or press menu button for dev menu
                Shake or press menu button fordev menuShake or press menu button for dev menu
                Shake or press menu button fordev menuShake or press menu button for dev menu
                Shake or press menu button fordev menuShake or press menu button for dev menu
                Shake or press menu button fordev menuShake or press menu button for dev menu
                Shake or press menu button fordev menuShake or press menu button for dev menu
                Shake or press menu button fordev menuShake or press menu button for dev menu
                Shake or press menu button fordev menuShake or press menu button for dev menu
                Shake or press menu button fordev menuShake or press menu button for dev menu
                Shake or press menu button fordev menuShake or press menu button for dev menu
                Shake or press menu button fordev menuShake or press menu button for dev menu
                Shake or press menu button fordev menuShake or press menu button for dev menu
                Shake or press menu button fordev menuShake or press menu button for dev menu
                Shake or press menu button fordev menuShake or press menu button for dev menu
                Shake or press menu button fordev menuShake or press menu button for dev menu
            </Text>
         </ScrollView>
      </View>
    );
  }
}
const styles =StyleSheet.create({
  container: {
    height:400,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF",
  },
  contentContainer: {
      margin:10,
      backgroundColor:"#ff0000",
    }
});
AppRegistry.registerComponent("ScrollViewDemo", () => ScrollViewDemo);

运行效果如下:

(六)最后总结

今天我们主要学习一下ScrollView组件的介绍以及使用方法。大家有问题可以加一下群React Native技术交流群(282693535)或者底下进行回复一下。

尊重原创，转载请注明：From Sky丶清（http://blog.csdn.net/developer_jiangqq）侵权必究！

关注我的订阅号(codedev123),每天分享移动开发技术(Android/IOS),项目管理以及博客文章!(欢迎关注，第一时间推送精彩文章)

关注我的微博，可以获得更多精彩内容