react native ScrollView 使用详解

ScrollView 是一个滚动控件，当内容显示不全时可以通过滚动显示。

属性：

View props… :View的所有属性
contentContainerStyle：内容容器的样式，所有的子视图都会包裹在内容容器内。
horizontal：为true时，横向滚动
keyboardDismissMode ：用户拖拽滚动视图的时候，是否要隐藏软键盘。

none（默认值）:拖拽时不隐藏软键盘。
on-drag :当拖拽开始的时候隐藏软键盘。
interactive: 软键盘伴随拖拽操作同步地消失，并且如果往上滑动会恢复键盘。安卓设备上 不支持这个选项，会表现的和none一样。

keyboardShouldPersistTaps: 如果当前界面有软键盘，那么点击scrollview后是否收起键盘

never（默认值）:点击TextInput以外的子组件会使当前的软键盘收起。此时子元素不会收到点击事件。
always:键盘不会自动收起，ScrollView也不会捕捉点击事件，但子组件可以捕获。
handled:当点击事件被子组件捕获时，键盘不会自动收起。这样切换TextInput时键盘可以保持状态。多数带有TextInput的情况下你应该选择此项。
false:已过期，请使用’never’代替。
true:已过期，请使用’always’代替。

onContentSizeChange:ScrollView内部可滚动内容的视图发生变化时调用,参数为内容视图的宽和高
onScroll:滚动的过程中，每帧最多调用一次此回调函数
refreshControl:可以进行指定RefreshControl组件。这样可以为ScrollView添加下拉刷新的功能.
showsHorizontalScrollIndicator:显示水平滚动条
showsVerticalScrollIndicator：显示垂直滚动条
style:样式属性

Flexbox…
ShadowProp#style…
Transforms…
backfaceVisibility enum(‘visible’, ‘hidden’)
backgroundColor string
borderColor string
borderTopColor string
borderRightColor string
borderBottomColor string
borderLeftColor string
borderRadius number
borderTopLeftRadius number
borderTopRightRadius number
borderBottomLeftRadius number
borderBottomRightRadius number
borderStyle enum(‘solid’, ‘dotted’, ‘dashed’)
borderWidth number
borderTopWidth number
borderRightWidth number
borderBottomWidth number
borderLeftWidth number
opacity number
overflow enum(‘visible’, ‘hidden’)
shadowColor string
shadowOffset {width: number, height: number}
shadowOpacity number
shadowRadius number

pagingEnabled:当值为true时，滚动条会停在滚动视图的尺寸的整数倍位置。这个可以用在水平分页上。默认值为false。比如我们滚动到多余半个屏幕的时候松手，控件会自动滚到下一页的位置。
scrollEnabled:是否可以滚动
scrollTo : (y: number | { x?: number, y?: number, animated?: boolean }, x: number, animated: boolean)
滚动到指定的x, y偏移处。第三个参数为是否启用平滑滚动动画。
scrollToEnd: 滚动到视图底部（水平方向的视图则滚动到最右边）scrollToEnd({animated: true})则启用平滑滚动动画

Demo

import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Text,
    ScrollView,
    TextInput,
    ToastAndroid,
    Button,
} from 'react-native';


export default class ScrollViewDemo extends Component {

    state = {
        data:['第1个', '第2个', '第3个', '第4个', '第5个', '第6个', '第7个', '第8个', '第9个', '第10个'],
    }

    _scroll;

    render() {
        return (
            <View style={{flex:1}}>
                <Button title='切换数据' onPress={()=>{
                    this.setState({
                        data:['第11个', '第12个', '第13个', '第14个', '第15个', '第16个', '第17个', '第18个', '第19个', '第20个','第21个'],
                    });
                }}></Button>
                <Button  title='滚动到y：100的位置' onPress={()=>{
                    this._scroll.scrollTo({y:100});
                }}/>
                <Button  title='滚动到末尾' onPress={()=>{
                    this._scroll.scrollToEnd();
                }}/>
                <ScrollView
                    ref={(scroll)=>this._scroll = scroll}
                    style={{borderColor:'red',borderWidth:2}}
                    contentContainerStyle={{paddingLeft:20,paddingTop:20,paddingRight:20}}
                    keyboardDismissMode='on-drag'
                    keyboardShouldPersistTaps='never'
                    showsVerticalScrollIndicator={true}
                    scrollEnabled={true}
                    pagingEnabled={true}
                    horizontal={false}
                    onContentSizeChange={(contentWidth, contentHeight)=>{
                        var msg = 'onContentSizeChange:'+contentWidth+','+contentHeight;
                        ToastAndroid.show(msg,ToastAndroid.SHORT);
                    }}
                onScroll={(e)=>{
                    console.warn('onScroll');
                }}>
                    <Text style={{height:50,backgroundColor:'black',color:'white'}}>悬浮在顶部</Text>
                    <TextInput />

                    {
                        this.state.data.map((item, index) => {
                            var color = index * 23 + 10;
                            return <Text style={[styles.text,{backgroundColor:color}]}>{item}</Text>
                        })
                    }
                </ScrollView>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    text: {
        height: 200,
        textAlign: 'center',
        textAlignVertical: 'center',
        color: 'red',
        fontSize: 30
    }
})

效果图

github下载地址