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

我们都知道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 图片轮播的高度，用于轮播点的精确定位。

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

猜你喜欢