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

---