ScrollView

参考文档

一个封装了平台的ScrollView（滚动视图）的组件，同时还集成了触摸锁定的“响应者”系统。

记住ScrollView必须有一个确定的高度才能正常工作，因为它实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器（通过滚动操作）。要给ScrollView一个确定的高度的话，要么直接给它设置高度（不建议），要么确定所有的父容器都有确定的高度。一般来说会给ScrollView设置flex: 1以使其自动填充父容器的空余空间，但前提条件是所有的父容器本身也设置了flex或者指定了高度，否则就会导致无法正常滚动，你可以使用元素查看器来查找具体哪一层高度不正确。

ScrollView内部的其他响应者尚无法阻止ScrollView本身成为响应者。

ScrollView和FlatList应该如何选择？ScrollView会简单粗暴地把所有子元素一次性全部渲染出来。其原理浅显易懂，使用上自然也最简单。然而这样简单的渲染逻辑自然带来了性能上的不足。想象一下你有一个特别长的列表需要显示，可能有好几屏的高度。创建和渲染那些屏幕以外的JS组件和原生视图，显然对于渲染性能和内存占用都是一种极大的拖累和浪费。

这就是为什么还有专门的FlatList组件。FlatList会惰性渲染子元素，只在它们将要出现在屏幕中时开始渲染。这种惰性渲染逻辑要复杂很多，因而API在使用上也更为繁琐。除非你要渲染的数据特别少，否则你都应该尽量使用FlatList，哪怕它们用起来更麻烦。

此外FlatList还可以方便地渲染行间分隔线，支持多列布局，无限滚动加载等等。

Props

方法

scrollTo()

scrollTo(([y]: number), object, ([x]: number), ([animated]: boolean));

滚动到指定的x, y偏移处。第三个参数为是否启用平滑滚动动画。

示例：

scrollTo({x: 0, y: 0, animated: true})

scrollToEnd()

scrollToEnd(([options]: object));

滚动到视图底部（水平方向的视图则滚动到最右边）。

加上动画参数scrollToEnd({animated: true})则启用平滑滚动动画，或是调用scrollToEnd({animated: false})来立即跳转。如果不使用参数，则animated选项默认启用。

scrollWithoutAnimationTo()

scrollWithoutAnimationTo(y, x);

不推荐使用，而是使用scrollTo。

flashScrollIndicators()

短暂地显示滚动指示器。

Example

示例

import React, { Component } from 'react';
import {View,ScrollView,StyleSheet ,Dimensions,Text} from 'react-native';
const {width, height} = Dimensions.get('window');

export class pageComponent extends Component {
    render() {
        return (
            <ScrollView
                //  默认为垂直排列 此属性为true改为水平排列
                horizontal={true}
                //  禁用水平滚动条
                showsHorizontalScrollIndicator={false}
                //  自动分页限ios
                pagingEnabled={true}
            >
                {this.renderChildView()}
            </ScrollView>
        );
    }

    renderChildView(){
        let childs = [];
        let colors = ['#00ff00', '#ff00ff', '#0000ff', '#ffffff', '#000000'];
        // 遍历
        for(let i=0; i<5; i++){
            let viewStyle={
                backgroundColor:colors[i],
                width:width,
                height:300,
                justifyContent: 'center',
                alignItems: 'center',
            };
            let textStyle={
                fontSize:20,
                textAlign:'center',
                color:'red'
            }
            childs.push(
                //  循环排列的view中必须有唯一表示
                <View key={i} style={viewStyle}>
                    <Text style={textStyle}>{colors[i]}</Text>
                </View>
            );
        }
        // 返回数组，不然怎么显示出来
        return childs;
    }
}