React Native之如何实现图片轮播效果

我们都知道React Native中有一个很常见的Swiper组件。详情请查看链接：
react-native-swiper

使用方法：
1. 安装第三方react-native-swiper组件：
npm i react-native-swiper --save
2. 引入第三方swiper组件
import Swiper from 'react-native-swiper';
3. 写我们自己的效果<Swiper dot={<View style={styles.dot}/>}
activeDot={<View style={styles.activeDot}/>}
paginationStyle={styles.paginationStyle}
loop={false}>
<View style={styles.slide}>
<Image style={styles.image} source={require('../content/img/guide/1.png')}/>
</View>
<View style={styles.slide}>
<Image style={styles.image} source={require('../content/img/guide/2.png')}/>
</View>
<View style={styles.slide}>
<Image style={styles.image} source={require('../content/img/guide/3.png')}/>
</View>
</Swiper>

const styles = {
slide: {
flex: 1,
backgroundColor: 'transparent'
},
image: {
width: AppDevice.screenWidth(),
height: AppDevice.screenHeight(),
},
dot: {
backgroundColor: Color.CMBlueColor,
opacity: 0.3,
width: 8,
height: 8,
borderRadius: 7,
marginLeft: 7,
marginRight: 7,
zIndex: 1,
},
activeDot: {
backgroundColor: Color.CMBlueColor,
width: 8,
height: 8,
borderRadius: 7,
marginLeft: 7,
marginRight: 7
},
paginationStyle: {
bottom: 10,
}
}
这个已经很好用了。之前我们一直拿来用做引导页整屏滑动的效果。但是问题来了，当我同样使用Swiper组件去写首页类似banner的图片轮播效果，会出现轮播点定位是以整屏的高度进行定位。所以，当拿来用做banner的时候，paginationStyle:{ bottom: 10}已经不在banner为父级的高度中。而是需要你把整屏滑动到最底部距上的10高度。无论我怎么修改Swiper的position定位到图片的relative或者强行更改这个bottom为610等等，都无济于事，因为每个手机屏幕大小其实都是不一样的，高度不一样，那么这个610肯定会露馅的。
我觉得Swiper组件本能的应该有api可以设定高度的，果然，我的第六感很不错。
解决办法：给Swiper添加属性 height={120}，即可。这里的120就是你所要实现的banner效果的banner的高度。
除此之外，我分享一下，Swiper所有的暴露在外的api属性：
重点属性： 

1.horizontal：水平方向轮播，默认true; 
2.loop:是否循环，默认true; 
3.index:第一次加载哪一个页面，默认是0； 
4.showsButtons：是否显示向左向右只是标志，默认false; 
5.autoplay：是否自动播放，默认false; 
6.loadMinimal：是否进行预加载；loadMinimalSize：预加载的大小； 
7.autoplayTimeout：自动播放时，时间间隔； 
8.autoplayDirection：自动播放的方向； 
9.nextButton，prevButton可以改写向左，向右的指示箭头； 
10.title、renderPagination目前只支持ＩＯＳ，title就是滑动页面下面的名字，renderPagination就是页码； 
11.dot标志滑动的白点； 
12.activeDot选中状态标志出来的效果；
13.height 图片轮播的高度，用于轮播点的精确定位。