React-Native-UIBannerView

N-1 >= 0, N-2 >= 0

• 轮播图暂时只支持水平滑动使用。
• 一个窗口可以显示多个图片。
• 不使用setState的方式渲染，而是通过refs直接控制偏移量，同时所有图片都由同一个Animated动画控制放大缩小，和指示器的切换

相关Props

| name | type | default | extra | ---- |:----: |:---: |:---: | currentPage | Number | 0 | 默认显示第几个图片 | imageArr | Array | null | 所有的图片数据源，（最少有一个数据） | style | Dictionary | {} | 整个轮播图的可视大小，宽高样式 | builtinWH | Dictionary | {width,height} | 每个item的可视范围， | imageStyle | Dictionary | null | 每个图片的样式 | resizeMode | String | 'cover' | 图片的图片展示模式 | ifAutoScroll | Boolean | true | 是否自动轮播 | ifOffCircle | Boolean | false | 是否关闭无限循环模式 | infiniteInterval | Number | 1000 | 自动轮播间隔时长 | ifShowPointerView | Boolean | true | 是否显示图片指示器 | pointerViewStyle | Dictionary | null | 指示器的外框样式 | pointerStyle | Dictionary | null | 指示器圆点的样式 | pointerColorArr | Array(String) | [ 选中颜色, 默认颜色 ] | 指示器的颜色 | pointerOpacityArr | Array(Number) | [ 选中的透明度, 默认的透明度 ] | 指示器的透明度设置 | heightScale | Number | null | 强制设置图片 显示和非显示的高度比（>0的小数）

使用方式

<UIBannerView
                        ref = 'UIBannerView'
                        style={{ width:this.state.width, height:(this.state.width - 80)/3,backgroundColor : CONTENT_BACK_COLOR }}
                        builtinWH={{width:this.state.width - 80,height:(this.state.width - 80)/3, backgroundColor : RED_COLOR, }}
                        imageArr ={ newImageArr }
                        imageStyle = { { borderRadius : 5, width : this.state.width - 80, height : (this.state.width - 80)/3,} }
                        infiniteInterval = { 3000 }
                        ifAutoScroll = { _autoplay }
                        currentPage = { this.state.currentPage }
                        currentPageChangeFunc = {(index)=>{
                            this.state.currentPage = index;
                        }}
                        dealWithClickImage = {( index )=>{
                            this._clickBack(index)
                        }}
                        />

imageScale 的第二个元素设置比较大，两边显示小高度

<UIBannerView
                        ref = 'UIBannerView'
                        style={{ width:this.state.width, height:(this.state.width - 30)/3,backgroundColor : CONTENT_BACK_COLOR }}
                        builtinWH={{width:this.state.width - 30,height:(this.state.width - 50)/3, backgroundColor : RED_COLOR, }}
                        imageArr ={ newImageArr }
                        imageStyle = { { borderRadius : 5, width : this.state.width - 30, height : (this.state.width - 30)/3,} }
                        infiniteInterval = { 3000 }
                        imageScale = { [1, 0.95] }
                        heightScale = { 0.8 }
                        ifAutoScroll = { _autoplay }
                        currentPage = { this.state.currentPage }
                        currentPageChangeFunc = {(index)=>{
                            this.state.currentPage = index;
                        }}
                        dealWithClickImage = {( index )=>{
                            this._clickBack(index)
                        }}
                        />