ReactNative---ScrollView

ScrollView实现Banner效果

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

var screenWidth = Dimensions.get('window').width;

// 引入Json数据
var ImageData = require("./ImageData.json");

export default class App extends Component<Props> {

    // 静态属性(不会改变的)
    static defaultProps = {
        duration: 1500
    };

    // 构造函数
    constructor(props) {
        super(props);
        this.state = {
            currentPage: 0
        };
    }

    render() {
        return (
            <View style={styles.container}>
                <ScrollView
                    ref="scrollView"
                    // 横向滑动
                    horizontal={true}
                    // 隐藏滚动条
                    showsHorizontalScrollIndicator={false}
                    // 自动分页
                    pagingEnabled={true}
                    // 当一帧滚动结束
                    onMomentumScrollEnd={(e) => this.onAnimationEnd(e)}
                    // 开始拖拽
                    onScrollBeginDrag={this.onScrollBeginDrag}
                    // 结束拖拽
                    onScrollEndDrag={this.onScrollEndDrag}
                >
                    {this.renderAllImage()}
                </ScrollView>

                {/*添加指示器*/}
                <View style={styles.pagerViewStyle}>
                    {this.renderPageCircle()}
                </View>
            </View>
        );
    }

    /**
     * 返回图片数组
     * @returns {Array}
     */
    renderAllImage() {
        // 存储图片的数组
        var allImage = [];
        // 拿到Json图像数组
        var imgsArr = ImageData.data;
        // 遍历
        for (var i = 0; i < imgsArr.length; i++) {
            var imgItem = imgsArr[i];
            allImage.push(
                <Image key={i} source={{uri: imgItem.img}} style={{width: screenWidth, height: 260}}></Image>
            );
        }
        // 返回图片数组
        return allImage;
    }

    /**
     *
     * @returns {Array}
     */
    renderPageCircle() {
        // 圆点指示器数组
        var indicatorArray = [];
        // 拿到图像数组
        var imgsArr = ImageData.data;
        // 样式
        var style;
        // 遍历
        for (var i = 0; i < imgsArr.length; i++) {
            // 判断
            style = (i == this.state.currentPage) ? {color: 'orange'} : {color: '#ffffff'};
            // 把原点装入数组
            indicatorArray.push(
                <Text key={i} style={[{fontSize: 30}, style]}>&bull;</Text>
            );
        }
        // 返回指示器数组
        return indicatorArray;
    }

    /**
     * 当一帧滚动结束时调用
     * @param e就是ScrollView
     */
    onAnimationEnd(e) {
        // 1. 求出水平方向的偏移量
        var offsetX = e.nativeEvent.contentOffset.x;
        // 2. 求出当前的页数(floor: 向下取整)
        var currentPage = Math.floor(offsetX / screenWidth);
        // 3. 更新状态机，重新绘制UI
        this.setState({
            currentPage: currentPage
        });
    }

    /**
     * 实现一些复杂的操作
     */
    componentDidMount() {
        // 开启定时器
        this.startTimer();
    }

    /**
     * 开启定时器
     */
    startTimer() {
        // 2. 添加定时器(this.setScrollView.bind(this)这种写法要注意，否则获取不到this)
        this.timer = setInterval(this.setScrollView.bind(this), this.props.duration);
    }

    /**
     * 开始滚动
     */
    setScrollView() {
        // 1. 拿到ScrollView
        var scrollView = this.refs.scrollView;
        // 图片的数量
        var imgCount = ImageData.data.length;
        // 2.1 当前激活的页码数
        var activePage = 0;
        // 2.2 判断
        if ((this.state.currentPage + 1) >= imgCount) { // 越界
            activePage = 0;
        } else {
            activePage = this.state.currentPage + 1;
        }

        // 2.3 更新状态机
        this.setState({
            currentPage: activePage
        });

        // 2.4 让scrollView滚动起来
        var offsetX = activePage * screenWidth;
        scrollView.scrollResponderScrollTo({x: offsetX, y: 0, animated: true});
    }

    /**
     * 卸载的时候调用
     */
    componentWillUnmount() {
        if (this.timer != null) {
            clearInterval(this.state.timer);
        }
    }

    /**
     * 开始拖拽
     */
    onScrollBeginDrag() {
        if (this.timer != null){
            clearInterval(this.timer);
        }
    }

    /**
     * 结束拖拽
     */
    onScrollEndDrag() {
        this.startTimer();
    }

}

const styles = StyleSheet.create({
    container: {},
    pagerViewStyle: {
        width: screenWidth,
        height: 30,
        backgroundColor: 'rgba(0,0,0,0.3)',
        // 设置绝对定位
        position: 'absolute',
        bottom: 0,
        flexDirection: 'row',
        alignItems: 'center'
    }
});

效果

ScrollView实现Banner图