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,0.4)',flexDirection:'row',alignItems:'center'
    },navPoint:{
        width:10,height:10,backgroundColor:'white',borderRadius:5,marginLeft:8
    },navCurrentPoint:{
        width:10,backgroundColor:'#2f91f4',marginLeft:8
    }

});

module.exports = AdvertisingView;