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: '',
      description: 'Component that enable scrolling through child component',
    },
    makeItems: function(nItems: number, styles) : Array {
       var items = [];
      for (var i=0;i
             fontSize:20 }}>{'Item text' + i}
           
        );
      }
      return items;
    },

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

        var verticalScrollView=(
           
            {items}
           
        );
        return verticalScrollView;
    },
});
var styles = StyleSheet.create({
   itemWrapper: {
     backgroundColor: '#dddddd',
     alignItems: 'center',
     borderWidth: 5,
     borderColor: 'red',
     borderRadius: 5,
     padding: 30,
     margin: 5,
   },
   horizontalItemWrapper: {
     padding: 50,
   },
   verticalScrollView:{
     backgroundColor: 'aquamarine',
     margin: 10,
   },
});
AppRegistry.registerComponent('PerfectProject',() => PerfectProject);

运行效果如下图所示:

（三）属性列表

首先拥有View所有属性，View官方相关属性

名称	value	作用
contentContainerStyle	样式风格属性(传入StyleSheet创建的Style文件)	该样式会作用于被ScrollView包裹的所有的子视图
horizontal	bool	When true, the scroll view’s children are arranged horizontally in a row instead of vertically in a column. The default value is false.
keyboardDismissMode	enum(‘none’, ‘interactive’, ‘on-drag’)	Determines whether the keyboard gets dismissed in response to a drag. - ‘none’ (the default), drags do not dismiss the keyboard. - ‘on-drag’, the keyboard is dismissed when a drag begins. - ‘interactive’, the keyboard is dismissed interactively with the drag and moves in synchrony with the touch; dragging upwards cancels the dismissal. On android this is not supported and it will have the same behavior as ‘none’.
keyboardShouldPersistTaps	bool	When false, tapping outside of the focused text input when the keyboard is up dismisses the keyboard. When true, the scroll view will not catch taps, and the keyboard will not dismiss automatically. The default value is false.
onContentSizeChange	function	Called when scrollable content view of the ScrollView changes。Handler function is passed the content width and content height as parameters: (contentWidth, contentHeight)。It’s implemented using onLayout handler attached to the content container which this ScrollView renders.
onScroll	function	Fires at most once per frame during scrolling. The frequency of the events can be controlled using the scrollEventThrottle prop.
pagingEnabled	bool	When true, the scroll view stops on multiples of the scroll view’s size when scrolling. This can be used for horizontal pagination. The default value is false。
refreshControl	element	A RefreshControl component, used to provide pull-to-refresh functionality for the ScrollView。
removeClippedSubviews	bool	Experimental: When true, offscreen child views (whose overflow value is hidden) are removed from their native backing superview when offscreen. This can improve scrolling performance on long lists. The default value is true.
scrollEnabled	bool	When false, the content does not scroll. The default value is true.
showsHorizontalScrollIndicator	bool	When true, shows a horizontal scroll indicator。
showsVerticalScrollIndicator	bool	When true, shows a vertical scroll indicator。

（四）风格样式（Style）

两平台通用属性

名称	value	作用
Flexbox…	Flexbox…	弹性盒子特性
ShadowPropTypesIOS#style…	ShadowPropTypesIOS#style…	阴影效果相关属性
Transforms	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’)
elevation	number，这个style属性只适合Android平台，不适用于iOS平台	顾名思义，海拔值，设置一个视图的海拔，利用了Android底层的elevation API，这个可以添加一个向下的阴影效果到这个组件上，以及可能影响到Z的顺序。这个属性只支持Android 5.0+，对以前的版本不适用。

Android平台独有

名称	value	功能描述
endFillColor	color	超过ScrollView内部内容多余空间的颜色设置，该属性可以避免去设置一个背景颜色造成不必要的系统开销。这是一个比较先进的优化方案。
scrollPerfTag	string	Tag used to log scroll performance on this scroll view. Will force momentum events to be turned on (see sendMomentumEvents). This doesn’t do anything out of the box and you need to implement a custom native FpsListener for it to be useful.

iOS平台独有

名称	value	功能描述
alwaysBounceHorizontal	bool	水平弹簧效果，当horizontal ={true}默认是true，horizontal={false}默认是false。
alwaysBounceVertical	bool	垂直弹簧效果，当horizontal={true}默认是false，horizontal={false}默认是true。
automaticallyAdjustContentInsets	bool	自动调节内容内偏移，控制是否自动调节内容内偏移以便于一个navigation bar或者tab bar或者toolbar不挡住Scrollview中的内容。默认是true
bounces	bool	控制水平方向与垂直方向的弹簧效果，当为false，即使设置了alwaysBounce* 属性为true，依然不会出现弹簧效果。默认是true。
bouncesZoom	bool	控制拉近与缩小到最后是否有弹性动画
canCancelContentTouches	bool	控制ScrollView是否可以拖动，如果为false为不能拖动，默认是true。
centerContent	bool	true：ScrollView中内容小于ScrollView的边界时，自动居中显示ScrollView中的子控件；超过边界无效。默认值false。
contentInset	{top: number, left: number, bottom: number, right: number}	内部内容距离ScrollView边界的内偏移量。默认全为0。
contentOffset	PointPropType	用来手动设置起始滚动偏移量。默认为 {x: 0,y: 0} 。
decelerationRate	enum(‘fast’, ‘normal’) 、 number	指定手指抬起减速速率。iOS底层UIScrollViewDecelerationRateNormal与UIScrollViewDecelerationRateFast；分别，normal为0.998（默认值），fase为0.99；也可以指定一个浮点数，确定减速快慢。
directionalLockEnabled	bool	控制只有一个方向可以滚动当拖拽时。默认为false。
indicatorStyle	enum(‘default’, ‘black’, ‘white’)	指示器类型，default与black相同，black与白色背景搭配，white与黑色背景搭配。
maximumZoomScale	number	拉近时缩放最大尺寸比例
minimumZoomScale	number	缩小时缩放最小尺寸比例
onScrollAnimationEnd	function	当滚动动画结束时调用
scrollEventThrottle	number	控制当滚动时滚动事件解除的频率
scrollIndicatorInsets	{top: number, left: number, bottom: number, right: number}	指定指示器内偏移量，应与contentInset值相同，默认全为0。
scrollsToTop	bool	true：当点击状态栏时滚动到顶部，默认值为true。
snapToAlignment
snapToInterval
stickyHeaderIndices
zoomScale	number	指定当前缩放比例值。默认为1.0

（五）方法

1. scrollTo(y: number | { x?: number, y?: number, animated?: boolean }, x: number, animated: boolean)
2. scrollWithoutAnimationTo(y, x) 被移除了，已经过时了！