ReactNative 广告轮播页的实现

来源：互联网发布：淘宝手机版详情页尺寸编辑：程序博客网时间：2024/06/09 15:16

基于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;

0 0