ReactNative组件-ScrollView

ScrollView组件

普通滚动组件，非listview

常用的属性有：

horizontal 是否横向，默认纵向，需要使用时： horizontal={true}

showsHorizontalScrollIndicator 是否显示水平滚动条，不需要显示是设置为false

showsVerticalScrollIndicator 是否显示垂直滚动条

pagingEnabled 是否分页，默认false，设置true之后每次滑动都是一个item

scrollEnabled 是否能够滑动

keyboardShouldPersistTaps 如果当前界面有软键盘，那么点击scrollview后是否收起键盘，取决于本属性的设置

onMomentumScrollStart 滚动动画开始时调用此函数。

onMomentumScrollEnd 滚动动画结束时调用此函数。

scrollTo(y: number | { x?: number, y?: number, animated?: boolean }, x: number, animated: boolean) # 滚动到指定的x, y偏移处。第三个参数为是否启用平滑滚动动画。

头部滑动案例

效果图：

QQ截图20190408215011.png QQ截图20190408215023.png

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


var ImageData = require('../DataJson.json').data;


// var TimerMinxin = require('react-timer-mixin');

export default class ScrollViewTest extends Component {

    // mixins: [TimerMinxin],

    constructor(props) {
        super(props);
        this.state = {
            currentPage: 0,
        }
    }

    componentWillMount(){
        console.log("生命周期=componentWillMount");
    }

    /**
     * 处理复杂和耗时的操作
     */
    componentDidMount() {
        console.log("生命周期=componentDidMount");
        this.startTimer();
    }

    render() {
        console.log('生命周期=render');
        return (
            <View style={mystyle.container}>
                <ScrollView
                    ref='myScrollView'
                    horizontal={true}
                    pagingEnabled={true}
                    showsHorizontalScrollIndicator={false}
                    onMomentumScrollEnd={(e) => this.scrollEnd(e)}
                    // 开始拖拽
                    onScrollBeginDrag={()=>{clearInterval(this.timer)}}
                    // 结束拖拽
                    onScrollEndDrag={()=>this.startTimer()}
                >
                    {this.renderChildView()}
                </ScrollView>
                <View style={mystyle.viewDotStyle}>
                    {this.renderAllDot()}
                </View>
            </View>

        );
    }



    //加载所有图片
    renderChildView() {
        var allChild = [];

        for (let i = 0; i < ImageData.length; i++) {

            var itemBean = ImageData[i];

            allChild.push(
                <Image key={i} style={mystyle.imgStyle} source={{ uri: itemBean.icon }} />
            );

        }
        return allChild;
    }

    //加载所有圆点
    renderAllDot() {
        var allChild = [];
        var style;

        for (let i = 0; i < ImageData.length; i++) {
            style = (this.state.currentPage == i) ? { backgroundColor: 'yellow' } : { backgroundColor: 'gray' }
            allChild.push(
                <View key={i} style={[mystyle.dotStyle, style]} >
                </View>
            );
        }
        return allChild;
    }

    //滚动结束
    scrollEnd = (e) => {

        const offsetX = parseInt(e.nativeEvent.contentOffset.x);
        const widthInt = parseInt(width);
        const index = parseInt(offsetX / widthInt);

        console.log("widthInt==" + widthInt + "\t\toffsetX==" + offsetX + "\t\tindex==" + index);

        this.setState({
            currentPage: index
        });
    }


    startTimer() {
        console.log('启动定时器');
        var currenIndex = 0;
        const countPage = ImageData.length;
        const myScrollView = this.refs.myScrollView;

        this.timer = setInterval(() => {
            console.log('定时器');
            if (this.state.currentPage + 1 >= countPage) {
                currenIndex = 0;
            } else {
                currenIndex=(this.state.currentPage+=1);
            }

            this.setState({
                currentPage:currenIndex
            });

            console.log("currentPage=="+this.state.currentPage+"\t\tcurrenIndex=="+currenIndex);
            // myScrollView.scrollResponderScrollTo({x:currenIndex*width,y:0,animted:true});
            myScrollView.scrollTo({x:currenIndex*width,y:0,animted:true});

        }, 3000);

    }

}

var Dimensions = require('Dimensions');
var { width } = Dimensions.get('window');

const mystyle = StyleSheet.create({

    container: {
        backgroundColor: 'red',
    },

    imgStyle: {
        height: 300,
        width: width,
    },

    viewDotStyle: {
        height: 30,
        position: 'absolute',
        bottom: 0,
        right: 0,
        left: 0,
        backgroundColor: 'rgba(0,0,0,0.6)',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center'
    },
    dotStyle: {
        height: 10,
        width: 10,
        borderRadius: 5,
        marginLeft: 10,
        backgroundColor: 'blue',
        fontSize: 50,
    }
});