自定义Banner组件

ScrollView组件

一个包装了平台的ScrollView（滚动视图）的组件，同时还集成了触摸锁定的“响应者”系统。

• ScrollView必须有一个确定的高度才能正常工作
  它实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器（通过滚动操作）。
  通常有两种做法：
  第一种： 直接给该ScrollView进行设置高度(不建议)；
  第二种： ScrollView中不要加{flex:1}。
• ScrollView内部的其他响应者尚无法阻止ScrollView本身成为响应者

常用属性

• contentContainerStyle StyleSheetPropType(ViewStylePropTypes)
  这些样式会应用到一个内层的内容容器上，所有的子视图都会包裹在内容容器内。
• horizontal bool
  当此属性为true的时候，所有的的子视图会在水平方向上排成一行，而不是默认的在垂直方向上排成一列。默认值为false。
• OnMomentumScrollEnd function
  当一帧滚动完毕的时候调用，e.nativeEvent.contentOffset。
• onScrollBeginDrag fuction
  当开始手动拖拽的时候调用。
• onScrollEndDrag fuction
  当结束手动拖拽的时候调用。
• showsHorizontalScrollIndicator bool
  当此属性为true的时候，显示一个水平方向的滚动条。
• showsVerticalScrollIndicator bool
  当此属性为true的时候，显示一个垂直方向的滚动条。
• onScroll function
  在滚动的过程中，每帧最多调用一次此回调函数。调用的频率可以用scrollEventThrottle属性来控制。

用ScrollView实现一个Banner广告

先导入计时器类库
npm i react-timer-mixin --save
在项目中需要引入并注册：
引入： var TimerMixin = require('react-timer-mixin');
注册：mixins: [TimerMixin]
具体代码实现：

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

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

// 引入计时器类库
var TimerMixin = require('react-timer-mixin');

// 引入json数据
var ImageData = require('./ImageData.json');


var App = React.createClass({

    // 注册计时器
    mixins: [TimerMixin],

    // 设置固定值
    getDefaultProps(){
        return{
            // 每隔多少时间
            duration: 1000
        }
    },

    // 设置可变的和初始值
    getInitialState(){
        return{
            // 当前的页码
            currentPage: 0
        }
    },

    render(){
        return(
            
                this.onAnimationEnd(e)}
                    // 开始拖拽
                    onScrollBeginDrag={this.onScrollBeginDrag}
                    // 停止拖拽
                    onScrollEndDrag={this.onScrollEndDrag}
                >
                    {this.renderAllImage()}
                
                {/*返回指示器*/}
                
                    {/*返回5个圆点*/}
                    {this.renderPageCircle()}
                
            
        );
    },

    // 调用开始拖拽
    onScrollBeginDrag(){
        // 停止定时器
        this.clearInterval(this.timer);
    },

    // 调用停止拖拽
    onScrollEndDrag(){
        // 开启定时器
        this.startTimer();
    },

    // 实现一些复杂的操作
    componentDidMount(){
        // 开启定时器
        this.startTimer();
    },

    // 开启定时器
    startTimer(){
        // 1. 拿到scrollView
        var scrollView = this.refs.scrollView;
        var imgCount = ImageData.data.length;

        // 2.添加定时器  this.timer --->可以理解成一个隐式的全局变量
        this.timer = this.setInterval(function () {
            // 2.1 设置圆点
            var activePage = 0;
            // 2.2 判断
            if((this.state.currentPage+1) >= imgCount){ // 越界
                activePage = 0;
            }else{
                activePage = this.state.currentPage+1;
            }

            // 2.3 更新状态机
            this.setState({
                currentPage: activePage
            });

            // 2.4 让scrollView滚动起来
            var offsetX = activePage * width;
            scrollView.scrollResponderScrollTo({x:offsetX, y:0, animated:true});

        }, this.props.duration);

    },


    // 返回所有的图片
    renderAllImage(){
        // 数组
        var allImage = [];
        // 拿到图像数组
        var imgsArr = ImageData.data;
        // 遍历
        for(var i=0; i
            );
        }
        // 返回数组
        return allImage;
    },

    // 返回所有的圆点
    renderPageCircle(){
        // 定义一个数组放置所有的圆点
        var indicatorArr = [];
        var style;
        // 拿到图像数组
        var imgsArr = ImageData.data;
        // 遍历
        for(var i=0; i•
            );
        }
        // 返回
        return indicatorArr;
    },

    //  当一帧滚动结束的时候调用
    onAnimationEnd(e){
        // 1.求出水平方向的偏移量
        var offSetX = e.nativeEvent.contentOffset.x;

        // 2.求出当前的页数
        var currentPage = Math.floor(offSetX / width);
        // console.log(currentPage);

        // 3.更新状态机,重新绘制UI
        this.setState({
            // 当前的页码
            currentPage: currentPage
        });
    }

});


const styles = StyleSheet.create({
    container:{
        marginTop:25
    },

    pageViewStyle:{
        width:width,
        height:25,
        backgroundColor:'rgba(0,0,0,0.4)',

        // 定位
        position:'absolute',
        bottom:0,

        // 设置主轴的方向
        flexDirection:'row',
        // 设置侧轴方向的对齐方式
        alignItems:'center'
    }
});