React Native 之ScrollView輪播圖

RN中的定時器mixin導入方法,用終端進入當前工程目錄,輸入命令
npm i react-timer-mixin --save

//引入json数据
var ImageData = require('./data.json');
//引入定时器
var TimerMixin = require('react-timer-mixin');
//得到屏幕寬
var Dimensions = require('Dimensions');
var {width} = Dimensions.get('window');


export default class Test extends Component {
    //注册定时器
    mixins:[TimerMixin];

    state={
        //当前页面,控制小點點
        currentPage:0,
    }
    //初始化固定值
    static defaultProps={
        //间隔时间  单位是毫秒!!
        duration:1000
    }

    render() {
        return (
            <View style={styles.container}>
                <ScrollView
                    ref="scrollView"
                    horizontal={true}//改成左右滑動
                    showsHorizontalScrollIndicator={false}//水平方向滾動條不顯示
                    pagingEnabled = {true}//分頁顯示
                    //一帧动画结束之后調用以便改變小點點!!
                    onMomentumScrollEnd={(e)=>this.onScrollAnimationEnd(e)}
                    onScrollBeginDrag={()=>this.ScrollBeginDrag()}
                    onScrollEndDrag={()=>this.startTimer()}
                >
                    {this.renderAllImage()}
                </ScrollView>
                {/*指示器*/}
                <View style={styles.pageViewStyle}>
                        {/*5个小点*/}
                    {this.renderPage()}
                </View>
            </View>
        );
    }
    ScrollBeginDrag(){
        clearInterval(this.timer);
    }

    //UI加载完毕
    componentDidMount(){
        //开启定时器
        this.startTimer();
    }

    //开启定时器
    startTimer(){
        //写逻辑代码
        //1.拿到ScrollView
        var scrollView = this.refs.scrollView;
        var imgCount = ImageData.data.length;
        var obj = this;

        //2.设置定时器,下面這個函數裏面不能用this!!!
        this.timer = setInterval(function () {
            //2.1 设置当前页
            var currentPage = 0;
            //2.2 判断
            if((obj.state.currentPage + 1)>= imgCount){
                //清零
                currentPage = 0;
            }else{
                currentPage = obj.state.currentPage + 1;
            }
            console.log(currentPage);

            //2.3 更新状态机
            obj.setState({
                currentPage:currentPage
            })
            //2.4 滚起来
            var offsetX = currentPage * width;
            scrollView.scrollTo({x:offsetX,y:0,animated:true});

        },this.props.duration);
    }


    //滚动完毕,傳遞過來的e就是scrollView本身
    onScrollAnimationEnd(e){
        //1.拿到偏移量
        var offsetX = e.nativeEvent.contentOffset.x;

        //2.求出当前第几页
        var currentPage = Math.floor(offsetX/width);

        //3.更新状态机--此時已經完成滾動小點點的改變了
        this.setState({
            currentPage:currentPage
        });

    }

    //返回小点点
    renderPage(){
        var style;
        //点一个装点点的数组
        var pageArr = [];
        //拿到图片数组
        var imgsArr = ImageData.data;
        //遍历
        for(var i=0;i<imgsArr.length;i++){
            //判断
            style = (i==this.state.currentPage)?{color:'orange'}:{color:'#ffffff'};
            //给page加小點,&bull為轉意字符
            pageArr.push(
                <Text
                    key={i}
                    style={[{fontSize:25},style]}
                >• </Text>
            )
        }
        //返回
        return pageArr;
    }

    //加载所有的图片
    renderAllImage(){
        //数组
        var allImage = [];
        //拿到图片数据
        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:width,height:150}}
                />
            )
        }
        //返回所有的图片
        return allImage;
    }
}

const styles = StyleSheet.create({
    container: {

    },
    pageViewStyle:{
        width:width,
        height:25,
        backgroundColor:'rgba(0,0,0,0.2)',
        //定位,將container的flex:1去掉後,整個大的View大小就是內容大小,也就是scrollview的大小,固此時pageView就在scrollview的最下面
        position:'absolute',
        bottom:0,

        //主轴方向
        flexDirection:'row',
        justifyContent:'flex-end',
        alignItems:'center'
    }

});