# React-Native-UIBannerView

**Repository Path**: kkrn/React-Native-UIBannerView

## Basic Information

- **Project Name**: React-Native-UIBannerView
- **Description**: 轮播组件
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-06-25
- **Last Updated**: 2025-06-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# React-Native-UIBannerView
![案例](https://coding.net/u/yks/p/React-Native-UIBannerView/git/blob/master/image/%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7%202020-01-04%20%E4%B8%8A%E5%8D%8810.24.54.png)
![演示](https://coding.net/u/yks/p/React-Native-UIBannerView/git/blob/master/image/Jan-04-2020%2016-53-57.gif)
<br>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的小数）
# 使用方式
```js
<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 的第二个元素设置比较大，两边显示小高度
```js
<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)
                        }}
                        />
```