ReactNative 广告轮播页的实现

我们希望能够尽我们所能，来让这个世界变的更简单，如果你想了解我们，请点击这里

---

基于ReactNative的广告页面组件，可直接引入使用。引入方式

var AdvertisingView = require('./AdvertisingView');


render() {
    return (
        <View>
          <AdvertisingView />
        </View>
    );
  }

JsonData数据

{
  "data": [
    {
      "img" : "img_01",
      "title" : "你那一笑倾国倾城"
    },
    {
      "img" : "img_02",
      "title" : "那里记录了最唯美的爱情故事"
    },
    {
      "img" : "img_03",
      "title" : "我怎么是一个剩女"
    },
    {
      "img" : "img_04",
      "title" : "生命中最后的四分钟"
    },
    {
      "img" : "img_05",
      "title" : "我们都需要治疗"
    }
  ]
}

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

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

//引入react-timer-mixin定时器
var TimeMiXin = require('react-timer-mixin');


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

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

var AdvertisingView = React.createClass({

    mixins:[TimeMiXin],

    getDefaultProps(){
        return{
            scrollTime:2000
        }
    },

    getInitialState(){
        return {
            currentPage:0,
        }
    },

    render(){

        return(
            <View>
                <ScrollView
                    ref = 'scrollView'
                    style = {{marginTop:64}}
                    //横向滚动
                    horizontal = {true}
                    //自动分页
                    pagingEnabled = {true}
                    //滑动时关闭键盘
                    keyboardDismissMode = 'on-drag'
                    //隐藏横向滚动条
                    showsHorizontalScrollIndicator = {false}
                    //回弹事件取消
                    alwaysBounceHorizontal = {false}
                    //回弹事件取消
                    bounces = {false}
                    //每一帧滑动结束的时候回调
                    onMomentumScrollEnd = {this.scrollEnd}
                    //开始拖拽时调用
                    onScrollBeginDrag = {this.beginDrag}
                    //停止托转时调用
                    onScrollEndDrag = {this.endDrag}>

                    {this.returnImageView()}
                </ScrollView>

                <View style={styles.navView}>
                    {this.returnNavPointView()}
                </View>
            </View>
        );
    },
    // render 方法执行完毕之后调用
    componentDidMount(){
        this.startTimeout();
    },

    // 组件将要被卸载的时候调用
    componentWillUnmount(){
        // 如果存在this.timer，则使用clearTimeout清空。
        // 如果你使用多个timer，那么用多个变量，或者用个数组来保存引用，然后逐个clear
        this.timer && clearTimeout(this.timer);
    },

    // 开启定时器
    startTimeout(){
        //获取scrollView
        var scrollView = this.refs.scrollView;
        //开启定时器
        this.timer = setInterval(
            () => {
                var addPage = this.state.currentPage + 1;
                addPage = addPage == jsonData.length ? 0 : addPage;
                this.setState({
                    currentPage:addPage,
                });

                // scrollView.scrollTo({x:addPage * width,y:0,animated:true});
                scrollView.scrollResponderScrollTo({x:addPage * width,y:0,animated:true});
            },
            this.props.scrollTime
        );
    },

    returnImageView(){
        var returnViewArr = [];

        for (var i = 0 ; i < jsonData.length ; i++){
            var imgData = jsonData[i];
            returnViewArr.push(
                <Image key={i} source={{uri:imgData.img}} style={styles.LunBoImage}/>
            );
        }

        return returnViewArr;

    },

    returnNavPointView(){
        var returnViewArr = [];

        for (var i = 0 ; i < jsonData.length ; i ++){

            if (this.state.currentPage == i){
                returnViewArr.push(
                    <View key={i} style={styles.navCurrentPoint}></View>
                );
            }else{
                returnViewArr.push(
                    <View key={i} style={styles.navPoint}></View>
                );
            }
        }

        return returnViewArr;
    },

    // 滑动结束时候的回调
    scrollEnd(event){

    //    获取水平方向的偏移量
        var offsetX = event.nativeEvent.contentOffset.x;
    //    计算页数
        var page = Math.floor(offsetX / width);
    //     设置当前的page
        this.setState({
            currentPage:page
        });

    //    判断当前的page页,如果page页为第一个或者最后一个的话,需要进行额外操作
        if (page == 0){

        }else if(page == jsonData.length){

        }
    },
//    当用户开始托转的时候定制定时器
    beginDrag(event){
        this.timer && clearTimeout(this.timer);
    },
    // 当用户停止拖拽的时候调用
    endDrag(event){
        this.startTimeout();
    }
});

const styles = StyleSheet.create({
    LunBoImage:{
        width:width,
        height:160
    },
    navView:{
        width:width,
        height:25,
        marginTop:-25,
        backgroundColor:'rgba(14,14,14,0.4)',
        flexDirection:'row',
        alignItems:'center'
    },
    navPoint:{
        width:10,
        height:10,
        backgroundColor:'white',
        borderRadius:5,
        marginLeft:8
    },
    navCurrentPoint:{
        width:10,
        height:10,
        backgroundColor:'#2f91f4',
        borderRadius:5,
        marginLeft:8
    }

});

module.exports = AdvertisingView;