Qunar React Native 组件

ScrollView 滚动组件 >=v1.0.0

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

记住ScrollView必须有一个确定的高度才能正常工作，因为它实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器（通过滚动操作）。
要给一个ScrollView确定一个高度的话，要么直接给它设置高度（不建议），要么确定所有的父容器都已经绑定了高度。
在视图栈的任意一个位置忘记使用{flex:1}都会导致错误，你可以使用元素查看器来查找问题的原因。

ScrollView

属性

contentInset { EdgeInsetsPropType }

内容范围相对滚动视图边缘的坐标。

默认值: {top: 0, left: 0, bottom: 0, right: 0}

contentOffset { PointPropType }

用来手动设置初始的滚动坐标。

默认值: {x: 0, y: 0}

alwaysBounceHorizontal { bool }

当此属性为true时，水平方向即使内容比滚动视图本身还要小，也可以弹性地拉动一截。

默认值: 当horizontal={true}时默认值为true，否则为false。

alwaysBounceVertical { bool }

当此属性为true时，垂直方向即使内容比滚动视图本身还要小，也可以弹性地拉动一截。

默认值: 当horizontal={true}时默认值为false，否则为true。

bounces { bool } >=v1.1.0

当值为true时，如果内容范围比滚动视图本身大，在到达内容末尾的时候，可以弹性地拉动一截。如果为false，尾部的所有弹性都会被禁用，即使alwaysBounce*属性为true。默认值为true。

默认值: true

contentContainerStyle { View.propTypes.style }

ScrollView内容容器的样式，所有的子视图都会包裹在内容容器内。

decelerationRate { number|'fast'|'normal' }

一个浮点数，用于决定当用户抬起手指之后进行惯性滚动时，滚动视图减速停下的速度。normal为0.998，fast为0.9。

默认值: 'normal'（即：0.998）

horizontal { bool }

水平滚动。当该属性为true的时候，所有的的子视图会在水平方向上排成一行，而不是默认的在垂直方向上排成一列。

默认值: false

onScroll { function }

(event) => void

在滚动的过程中，每帧调用一次此回调函数。

如果使用了RefreshControl组件，则y包含RefreshControl组件的高度。即：在顶部时，正常是 {contentOffset: {y: 0}}，如果有RefreshControl组件，则为 {contentOffset: {y: 0}} （35为RefreshControl的默认高度）。

方法参数:

参数名	类型	描述	版本
event	obj	{nativeEvent: {contentOffset: {x: number, y: number}}

onScrollAnimationEnd { function }

(event) => void

当滚动动画结束之后调用此回调。

方法参数:

参数名	类型	描述	版本
event	obj	{nativeEvent: {contentOffset: {x: number, y: number}}

pagingEnabled { bool }

当值为true时，滚动条会停在滚动视图的尺寸的整数倍位置。这个可以用在水平或垂直的分页上。默认值为false。

注意：当使用pagingEnabled属性的时候，不允许在非scroll方向上使用 alwaysBounce* 属性。即：当 horizontal 为 true，pagingEnabled 为 true 的时候，不允许使用 alwaysBounceVertical ；当 horizontal 为 flase，pagingEnabled 为 true 的时候，不允许使用 alwaysBounceHorizontal

默认值: false

scrollEnabled { bool }

当值为false的时候，内容不能滚动，默认值为true。

默认值: true

showsHorizontalScrollIndicator { bool }

当此属性为true的时候，显示一个水平方向的滚动条。

默认值: false

showsVerticalScrollIndicator { bool }

当此属性为true的时候，显示一个垂直方向的滚动条。

默认值: true

stickyHeaderIndices { array[number] }

一个子视图下标的数组，用于决定哪些成员会在滚动之后固定在屏幕顶端。举个例子，传递stickyHeaderIndices={[0]}会让第一个成员固定在滚动视图顶端。这个属性不能和horizontal={true}一起使用。

keyboardDismissMode { enum('none', 'on-drag') } >=v1.2.0

用户拖拽滚动视图的时候，是否要隐藏软键盘。none(默认值)，拖拽时不隐藏软键盘。on-drag，当拖拽开始的时候隐藏软键盘。

默认值: 'none'

keyboardShouldPersistTaps { PropTypes.bool } >=v1.3.0

默认值为true（默认值与rn不一样，主要是为了兼容之前的版本）。当此属性为true的时候，在软键盘激活之后，点击焦点文本输入框以外的地方，键盘不会自动消失。当此属性为false的时候，在软键盘激活之后，点击焦点文本输入框以外的地方，键盘就会隐藏。

注：该属性的默认值与官方相反，默认在点击其他区域时不会收起键盘。同时，该属性的表现也与官方有区别：官方版本，在点击其他区域时会首先收起键盘，再次点击才会触发对应的操作；qrn的版本，在点击其他区域时会同时收起键盘，触发对应的操作。比如：页面上有输入框和『提交』按钮时，键盘弹起时点击按钮：官方版本会收起键盘，再次点击按钮才会触发按钮的点击事件；qrn版本在第一次点击『提交』按钮时就会收起键盘并且触发按钮的点击事件。

默认值: true

onMomentumScrollBegin { function } >=v1.2.0

(event) => void

惯性滚动开始时的回调。

方法参数:

参数名	类型	描述	版本
event	obj	{nativeEvent: {contentOffset: {x: number, y: number}}

onMomentumScrollEnd { function } >=v1.2.0

(event) => void

惯性滚动结束时的回调。

方法参数:

参数名	类型	描述	版本
event	obj	{nativeEvent: {contentOffset: {x: number, y: number}}

onScrollBeginDrag { function } >=v1.2.0

(event) => void

拖拽滚动开始时的回调。

方法参数:

参数名	类型	描述	版本
event	obj	{nativeEvent: {contentOffset: {x: number, y: number}}

onScrollEndDrag { function } >=v1.2.0

(event) => void

拖拽滚动结束时的回调。

方法参数:

参数名	类型	描述	版本
event	obj	{nativeEvent: {contentOffset: {x: number, y: number}}

refreshControl { element }

指定RefreshControl组件，用于为ScrollView提供下拉刷新功能。

loadControl { element }

指定LoadControl组件，用于为ScrollView提供上拉加载功能。

onContentSizeChange { function }

(width, height) => void

ScrollView内容容器onLayout时触发，所有的子视图都会包裹在内容容器内。

方法参数:

参数名	类型	描述	版本
width	number	内容容器宽度
height	number	内容容器高度

style { View.propTypes.style }

ScrollView的样式。

方法

scrollTo

滚动到某一位置，如果只在某一方向滚动，可以只传{x: x}或{y: y}。默认animated为true。

如果使用了RefreshControl组件，则y需要包含RefreshControl组件的高度。即：滚动到顶部，正常是 scrollTo({y: 0})，如果有RefreshControl组件，则 scrollTo({y: 35}) （35为RefreshControl的默认高度）。

方法参数:

参数名	类型	描述	版本
config	obj	滚动配置
config.x	number	横向位移
config.y	number	纵向位移
config.animated	bool	是否动画
config.duration	number	动画时长	1.3.0

startRefreshing

当前组件有refreshControl属性，并且没有正在下拉刷新，则强制触发下拉刷新，变成正在刷新的状态

stopRefreshing

当前组件有refreshControl属性，并且正在下拉刷新，则停止下拉刷新的状态。默认带有动画，可以设置{animated: false}取消。

停止刷新时，会自动ScrollTo顶部，所以不需要外部再调用。滚动到顶部的过程中，会禁止ScrollView响应。

方法参数:

参数名	类型	描述	版本
config	obj	停止刷新时的配置项
config.animated	bool	回到顶部是否需要动画
config.duration	number	回到顶部的动画时间，默认是300ms	1.3.0
config.result	bool	表示刷新成功还是失败。undefined：不显示刷新之后的状态；true：显示『加载成功』；false：显示『加载失败』	1.3.0

startLoading

当前组件有loadControl属性，并且没有正在加载，则强制触发加载更多，变成正在加载更多的状态

stopLoading

当前组件有loadControl属性，并且正在加载，则停止加载更多的状态

setContentOffsetBeforeLayout

本方法用来设置contentOffset相对当前的contentOffset偏移多少，在下一次render的时候会生效。本方法的主要使用场景是，当滚动内容的高度发生变化时（尤其是变小时），希望render之后，用户看到的内容位置是不变的。

方法参数:

参数名	类型	描述	必选	版本
position	PointPropType{x:x,y:y}	设置相对当前contentOffset的位移量

示例


import React, {
    Component,
    StyleSheet,
    View,
    Text,
    Navigator,
    Image,
    ScrollView,
    TouchableOpacity,
    Animated,
    Easing,
    Button,
} from 'qunar-react-native';

import ReactOrigin from 'react-native';

const styles = StyleSheet.create({
    operationContainer: {
        paddingBottom: 5,
        paddingHorizontal: 10,
        flexDirection: 'row',
    },
    operationText: {
        flex: 1,
        alignSelf: 'center',
    },
    operationTextHighlight: {
        color: '#1ba9ba',
    },
    itemText: {
        padding: 5,
        color: '#fff',
        alignSelf:'flex-end',
        fontSize: 32,
        fontWeight: 'bold'
    }
});

class ScrollViewExample extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            data: getCoupleOfRandomColor(30),
            qrn: true,
            long: true,
            alwaysBounceVertical: true,
            alwaysBounceHorizontal: false,
            bounces: true,
            showsVerticalScrollIndicator: true,
            showsHorizontalScrollIndicator: true,
        }
    }

    switch(prop) {
        this.setState({
            [prop]: !this.state[prop],
        });
    }

    render() {

        let ScrollViewComponent = (this.state.qrn ? ScrollView : ReactOrigin.ScrollView);
        let content = this.state.data.map((item, index)=>{
            if(index >= (this.state.long ? 30 : 3)){
                return;
            }
            return (
                <View style={{height: 50, backgroundColor: item}} key={index}>
                    <Text style={styles.itemText}>{index}</Text>
                </View>
            )
        })

        return (
            <View style={{flex:1, paddingTop: 5}}>
                <View style={styles.operationContainer}>
                    <Text style={styles.operationText}>· <Text style={styles.operationTextHighlight}>{this.state.qrn ? 'QRN' : 'RN'}</Text> 的ScrollView
                    </Text>
                    <Button text='切换' onPress={() => this.switch('qrn')} />
                </View>
                <View style={styles.operationContainer}>
                    <Text style={styles.operationText}>· bounces <Text style={styles.operationTextHighlight}>{this.state.bounces ? 'true' : 'false'}</Text></Text>
                    <Button text='切换' onPress={() => this.switch('bounces')} />
                </View>
                <View style={styles.operationContainer}>
                    <Text style={styles.operationText}>· 内容长度 <Text style={styles.operationTextHighlight}>{this.state.long ? '足够' : '不够'}</Text> 滚动</Text>
                    <Button text='切换' onPress={() => this.switch('long')} />
                </View>
                <View style={styles.operationContainer}>
                    <Text style={styles.operationText}>· <Text style={styles.operationTextHighlight}>{this.state.alwaysBounceVertical ? '允许(默认)' : '不允许(非默认)'}</Text> 纵向内容不足时滚动(alwaysBounceVertical)</Text>
                    <Button text='切换' onPress={() => this.switch('alwaysBounceVertical')} />
                </View>
                <View style={styles.operationContainer}>
                    <Text style={styles.operationText}>· <Text style={styles.operationTextHighlight}>{this.state.alwaysBounceHorizontal ? '允许(非默认)' : '不允许(默认)'}</Text> 横向内容不足时滚动(alwaysBounceHorizontal)</Text>
                    <Button text='切换' onPress={() => this.switch('alwaysBounceHorizontal')} />
                </View>
                <View style={styles.operationContainer}>
                    <Text style={styles.operationText}>· <Text style={styles.operationTextHighlight}>{this.state.showsVerticalScrollIndicator ? '显示(默认)' : '不显示(非默认)'}</Text> 纵向滚动条showsVerticalScrollIndicator（长度不够滚动不会显示）</Text>
                    <Button text='切换' onPress={() => this.switch('showsVerticalScrollIndicator')} />
                </View>
                <View style={styles.operationContainer}>
                    <Text style={styles.operationText}>· <Text style={styles.operationTextHighlight}>{this.state.showsHorizontalScrollIndicator ? '显示(默认)' : '不显示(非默认)'}</Text> 横向滚动条showsHorizontalScrollIndicator（长度不够滚动不会显示）</Text>
                    <Button text='切换' onPress={() => this.switch('showsHorizontalScrollIndicator')} />
                </View>
                <ScrollViewComponent
                    bounces={this.state.bounces}
                    alwaysBounceVertical={this.state.alwaysBounceVertical}
                    alwaysBounceHorizontal={this.state.alwaysBounceHorizontal}
                    showsVerticalScrollIndicator={this.state.showsVerticalScrollIndicator}
                    showsHorizontalScrollIndicator={this.state.showsHorizontalScrollIndicator}
                    >
                    {content}
                </ScrollViewComponent>
            </View>
        )
    }
}

function getCoupleOfRandomColor(num) {
    var colors = [];

    for(var i = 0; i < num; i++) {
        colors.push(getRandomColor());
    }

    return colors;
}

function getRandomColor() {
    var letters = '3456789ABC'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 10)];
    }
    return color;
}

module.exports = {
    title: '纵向滚动',
    examples: [{
        render: () => {
            return (
                <ScrollViewExample />
            );
        },
    }]
};

Qunar React Native 组件

ScrollView 滚动组件 >=v1.0.0

contentInset { EdgeInsetsPropType }

contentOffset { PointPropType }

alwaysBounceHorizontal { bool }

alwaysBounceVertical { bool }

bounces { bool } >=v1.1.0

contentContainerStyle { View.propTypes.style }

decelerationRate { number|'fast'|'normal' }

horizontal { bool }

onScroll { function }

onScrollAnimationEnd { function }

pagingEnabled { bool }

scrollEnabled { bool }

showsHorizontalScrollIndicator { bool }

showsVerticalScrollIndicator { bool }

stickyHeaderIndices { array[number] }

keyboardDismissMode { enum('none', 'on-drag') } >=v1.2.0

keyboardShouldPersistTaps { PropTypes.bool } >=v1.3.0

onMomentumScrollBegin { function } >=v1.2.0

onMomentumScrollEnd { function } >=v1.2.0

onScrollBeginDrag { function } >=v1.2.0

onScrollEndDrag { function } >=v1.2.0

refreshControl { element }

loadControl { element }

onContentSizeChange { function }

style { View.propTypes.style }

scrollTo

startRefreshing

stopRefreshing

startLoading

stopLoading

setContentOffsetBeforeLayout