React Native控件之ScrollView组件详解

React Native控件之ScrollView组件详解

（一）前言

这篇文章我们来讲解一下ScrollView，这个组件是在实际开发过程中用得非常多的，因为移动设备本来就比较小，所以只能通过滚动视图来包含更多的视图。该组件学习相对之前的有一定难度。

该组件封装了Android平台的ScrollView控件和iOS平台的UIScrollView控件，并且提供了触摸事件“responder”系统功能。使用ScrollView必须指定一个固定高度，因为就是包含很多不固定高度的子控件到该ScrollView控件中。有两种方式给ScrollView指定高度。一，直接给ScrollView进行设置高度（及其不建议使用这种方式）二，给ScrollView的父控件设置相关高度，使用这种时要给视图栈中每一个添加{flex:1},不然不会有效果。

（二）官方例子

首先我们来看一下官方的实际例子，不过该代码整体封装比较强，可能对于初学者来说有点难度，具体代码如下：

'use strict'
import React, { Component } from 'react';
import  {
   AppRegistry,
   StyleSheet,
   Text,
   View,
   Image,
   TouchableOpacity,
   ScrollView,
} from 'react-native'
var NUM_ITEMS = 20;
var PerfectProject = React.createClass({
    Statics: {
      titles: '<ScrollView>',
      description: 'Component that enable scrolling through child component',
    },
    makeItems: function(nItems: number, styles) : Array<any> {
       var items = [];
      for (var i=0;i<nItems;i++){
        items[i] = (
           <TouchableOpacity key={i} style={styles}>
             <Text style={
  {
  fontSize:20 }}>{
  'Item text' + i}</Text>
           </TouchableOpacity>
        );
      }
      return items;
    },

   render: function(){
        var items = this.makeItems(NUM_ITEMS,styles.itemWrapper);
           items[4] = (
            <ScrollView  key={
  'ScrollView'} horizontal={
  true}>
            {
  this.makeItems(NUM_ITEMS,[styles.itemWrapper,styles.horizontalItemWrapper])}
            </ScrollView>