ScrollView组件简介

ScrollView组件是一个可以滚动的视图，它可以支持上下方向以及左右方法进行滚动。由于手机屏幕大小有限，通常情况下，不能在一屏幕内展示完整的界面，特别是针对微博、今日头条之类的应用，其内容都来自于服务器，可以说其展示的内容长度是无穷无尽的。因此只能让用户通过滚动操作来进行内容浏览，此时需要借助ScrollView组件。

除了用来展示列表信息，ScrollView组件最常见的到地方就是手机上的浏览器页面。ScrollView组件对于内存性能没有优化。所有组件上的子组件都会被加载到内存中，因此主要在显示内容不是特别多的情况下使用。

ScrollView组件有两个滚动方向，竖直滚动和水平滚动。ScrollView组件在竖直滚动的时候，需要明确的知道它内容的高度。ScrollView组件在水平滚动的时候，需要明确知道它内容的宽度。

在ScrollView组件中，提供了一个重要方法，可以滚动到指定的位置。在下面的方法中，可以指定x与y值，即滚动到指定的x，y偏移处，第三个参数为是否启用平滑滚动动画。

scrollTo(y: number | { x?: number, y?: number, animated?: boolean }, x: number, animated: boolean)

ScrollView组件常用属性

ScrollView组件中提供了如下一些常用的属性和方法，可以对ScrollView组件的样式进行定制，同时可以监控ScrollView组件与用户进行交互的行为，从而可以在用户交互过程中添加额外的功能。

| 属性 | 类型| 值 |
| --- | --- | --- |
onScroll |function |在滚动的过程中，每帧最多调用一次此回调函数。调用的频率可以用scrollEventThrottle属性来控制。|
contentOffset |PointPropType |用来手动设置初始的滚动坐标。默认值为{x: 0, y: 0}。|
| pagingEnabled |bool | 当值为true时，滚动条会停在滚动视图的尺寸的整数倍位置。这个可以用在水平分页上。默认值为false。 |
| showsHorizontalScrollIndicator |bool | 当此属性为true的时候，显示一个水平方向的滚动条。 |
| showsVerticalScrollIndicator |bool | 当此属性为true的时候，显示一个垂直方向的滚动条。 |
| scrollEnabled |bool | 当值为false的时候，内容不能滚动，默认值为true。 |
| maximumZoomScale |number | 允许的最大缩放比例。默认值为1.0。 |
| minimumZoomScale |number | 允许的最小缩放比例。默认值为1.0。 |
| stickyHeaderIndices |[number] | 一个子视图下标的数组，用于决定哪些成员会在滚动之后固定在屏幕顶端。举个例子，传递stickyHeaderIndices={[

示例代码

现在我们来编写一个简单的示例代码，在ScrollView组件中存放200个Text组件。最终的效果是手机屏幕上展示200条文本，可以用手指上下滑动来进行浏览。

• 在终端中执行如下命令，创建ScrollViewDemo工程；

react-native init ScrollViewDemo

• 使用Atom打开工程的index.ios.js文件，编写组件所使用的样式;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
    paddingTop: 20,
  },
  verticalScrollView: {
    flex: 1,
    margin: 10,
  },
});

• 在一个ScrollView组件中添加200个Text组件；

var NUM_ITEMS = 200;

export default class ScrollViewDemo extends Component {
  makeItems(nItems: number, styles) {
    var items = [];
    for (var i = 0; i < nItems; i++) {
       items[i] = (
         <Text key={i}>{'这是第 ' + i + '行'}</Text>
       );
    }
    return items;
  };

  render() {
    var items = this.makeItems(NUM_ITEMS, styles.itemWrapper);
    var verticalScrollView = (
      <ScrollView style={styles.verticalScrollView}>
        {items}
      </ScrollView>
    );

    var view = (
      <View style={styles.container}>
        {verticalScrollView}
      </View>
    )
    return view;
  }
}

• 使用import加载项目所使用的模块，并且注册组件ScrollViewDemo成为整个应用的根容器

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  ScrollView,
} from 'react-native';

AppRegistry.registerComponent('ScrollViewDemo', () => ScrollViewDemo);

• 在终端中执行下面的命令运行程序，在iOS模拟器中可以看到ScrollView组件中添加的Text组件，并且可以上下滑动，在屏幕的右侧可以看到垂直方向的位置指示器。

react-native run-ios

---