轮播图简单实现

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    ScrollView,
    Image,
    AlertIOS,

} from 'react-native';

var TimerMixin = require('react-timer-mixin');

var Dimensions = require('Dimensions');
var width = Dimensions.get('window').width;
var one = 'https://img.alicdn.com/imgextra/i1/2228361831/TB2M8V4lctnpuFjSZFKXXalFFXa_!!2228361831.jpg';
var two = 'https://img.alicdn.com/bao/uploaded/i4/TB11hG9QXXXXXapaXXXXXXXXXXX_!!0-item_pic.jpg_b.jpg';
var three = 'https://img.alicdn.com/bao/uploaded/i4/TB1JusePXXXXXapaXXXXXXXXXXX_!!0-item_pic.jpg_b.jpg'
var fore = 'https://img.alicdn.com/bao/uploaded/i3/TB1j7_3KVXXXXanXXXXXXXXXXXX_!!0-item_pic.jpg_b.jpg';
export default class scrollImage extends Component {

    state = {
        currentPage:0,
    }

    static defaultProps={
        duration:2000
    }

    render() {
        return (

            <View style={styles.styleBackView}>
                <ScrollView style={styles.styleScrollView}
                            ref="scrollView"
                            horizontal={true}
                            pagingEnabled={true}
                            showsHorizontalScrollIndicator={false}
                            //滚动一页结束之后调用 滚动停止
                            onMomentumScrollEnd = {(obj)=>this.onAnimationEnd(obj)}
                            onScrollBeginDrag={()=>this.scrollBeginDrag()}
                            onScrollEndDrag={()=>this.scrollEndDrag()}
                >
                    {this.creatImage()}
                </ScrollView>

                <View style={styles.stylePage}>
                    {this.creatPoint()}
                </View>

            </View>
        )
    }

    creatImage() {

        var array = [];
        //无限滚动
        // array.push(
        //     <Image key={4} source={{uri:fore} }
        //            style={styles.styleImage}
        //     />
        // )

        array.push(
            <Image key={0} source={{uri:one} }
                   style={styles.styleImage}
            />
        )
        array.push(
            <Image key={1} source={{uri:two} }
                   style={styles.styleImage}
            />
        )
        array.push(
            <Image key={2} source={{uri:three} }
                   style={styles.styleImage}
            />
        )

        array.push(
            <Image key={3} source={{uri:fore} }
                   style={styles.styleImage}
            />
        )
        //无限滚动
        // array.push(
        //     <Image key={5} source={{uri:one} }
        //            style={styles.styleImage}
        //     />
        // )

        return array;

    }

    creatPoint(){

        var array = [];
        var style;
        var fontSize;

        for(var i=0;i<4;i++){

            style = (i == this.state.currentPage) ? {color:'green'} : {color:'#ffffff'};
            fontSize = (i == this.state.currentPage) ? {fontSize:35} : {fontSize:25};

            array.push(
                <Text key={i} style={[{marginLeft:5},style,fontSize]}>
                    &bull;
                </Text>

            )

        }

        return array;

    }

    onAnimationEnd(obj){

        var offsetx = obj.nativeEvent.contentOffset.x;
        var currentPage = Math.floor(offsetx/width);

    //无限滚动
        // if (currentPage == 5){
        //     obj.scrollTo({x:width,y:0,animated:false});
        //     currentPage = 0;
        // }else if (currentPage == 0){
        //
        //     let scrollX = 4*width;
        //
        //     obj.scrollTo({x:scrollX,y:0,animated:false});
        //
        //     currentPage = 3;
        //
        // }else{
        //
        //     currentPage = currentPage - 1;
        //
        // }

        this.setState({
            currentPage:currentPage

        });

    }

    //UI加载完成
    componentDidMount() {
        //无限滚动
        // var scrollView = this.refs.scrollView;
        // scrollView.scrollTo({x:width,y:0,animated:false});
        this.startTimer()
    }

    scrollBeginDrag(){
        clearInterval(this.timer);
    }

    scrollEndDrag(){
        this.startTimer();
    }

    startTimer(){
        //获取到scrollVIew
        var scrollView = this.refs.scrollView;
        var obj = this;

        this.timer = setInterval(function () {

            var activePage = 0;
            if(obj.state.currentPage>= 3){
                activePage = 0;
            }else {
                activePage = obj.state.currentPage + 1;
            }

            obj.setState({
                currentPage:activePage

            })

            var offsetX = activePage * width;

            scrollView.scrollTo({x:offsetX,y:0,animated:true});

        },this.props.duration);

    }

}

const styles = StyleSheet.create({
    styleBackView: {
        backgroundColor: 'red',

    },
    styleScrollView: {
        marginTop: 50,

    },
    styleImage: {
        width: width,
        height: 200,
        backgroundColor: 'yellow'
    },
    stylePage:{
        backgroundColor:'rgba(0,0,0,0.3)',
        width:width,
        height:30,
        position:'absolute',
        bottom:0,
        alignItems:'center',
        flexDirection:'row',
        justifyContent:'flex-end',
        paddingRight:30,
    }

});