React-native-uibannerview NPM

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)
                        }}
                        />

react-native-uibannerview react-native banner

10 months ago

5 years ago

5 years ago

5 years ago

5 years ago