react native学习笔记11——react-native-swiper轮播图

react native swiper可以实现广告轮播图和应用引导页的效果。

安装

react-native-swiper是第三方组件，通过nmp来安装。在项目的根目录下，通过输入

npm install react-native-swiper --save

引入

在要使用swiper的页面import

import Swiper from 'react-native-swiper'

基本使用方法

import React, { Component } from 'react'import {    Text,    View,} from 'react-native'import Swiper from 'react-native-swiper'export default class SwiperDemo extends Component {    render() {        return (        <Swiper style={styles.wrapper} showsButtons={true}>            <View style={styles.slide1}>                <Text style={styles.text}>Hello Swiper</Text>            </View>            <View style={styles.slide2}>                <Text style={styles.text}>Beautiful</Text>            </View>            <View style={styles.slide3}>                <Text style={styles.text}>And simple</Text>            </View>        </Swiper>        )    }}const styles = {    wrapper: {    },    slide1: {        flex: 1,        justifyContent: 'center',        alignItems: 'center',        backgroundColor: '#9DD6EB'    },    slide2: {        flex: 1,        justifyContent: 'center',        alignItems: 'center',        backgroundColor: '#97CAE5'    },    slide3: {        flex: 1,        justifyContent: 'center',        alignItems: 'center',        backgroundColor: '#92BBD9'    },    text: {        color: '#fff',        fontSize: 30,        fontWeight: 'bold'    }}

该效果可以用于App的引导页的设置。
react-native-swiper的基本使用方法比较简单，示例中showsButtons={true}用于控制左右箭头按钮是否显示，默认为false。

而为了实现类似广告栏的轮播图效果需要对Swiper的属性进行设置。在实现该效果前先介绍Swiper的各个属性。

属性介绍

基本属性

属性 默认 类型 描述 horizontal true bool 如果为true，内容往水平方向滚动 loop true bool 如果为false，当滚动到最后一张时，继续滚动无法回到第一张（即不可循环） index 0 number 设置初始页面的索引 showsButtons false bool 如果为true，显示左右箭头按钮 autoplay false bool 设置是否自动切换 onIndexChanged (index) => null func 当用户滑动页面到新的页面时触发调用

自定义样式

属性 默认 类型 描述 width - number 如果未设置，则默认flex:1全屏显示 height - number 如果未设置，则默认flex:1全屏显示 style {…} style 设置页面样式 loadMinimal false bool 是否进行预加载 loadMinimalSize 1 number 预加载的数量 loadMinimalLoader element 自定义预加载的样式

Pagination分页

属性 默认 类型 描述 showsPagination true bool 设置是否显示分页器（通常为页面下面的小圆点） paginationStyle {…} style 设置分页器的样式 renderPagination - function 通过 (index, total, context) 这三个参数控制分页器渲染, 具体为(this.state.index / this.state.total / this)，例如分页器渲染为数字而不是小圆点。 dot element 可以自定义圆点元素 activeDot element 可以自定义当前选中圆点元素 dotStyle {…} style 可以自定义圆点样式 activeDot {…} style 可以自定义当前选中圆点样式 dotColor - string 设置圆点颜色 activeDotColor - string 设置当前选中圆点颜色

autoPlay自动切换

属性 默认 类型 描述 autoplay true boolean 设置是否自动切换 autoplayTimeout 2.5 number 延迟时间（秒) autoplayDirection true boolean 设置循环方向

控制按钮

属性 默认 类型 描述 showsButtons true bool 是否显示左右控制箭头按钮 buttonWrapperStyle {position: ‘absolute’, paddingHorizontal: 15, paddingVertical: 30, top: 70, left: 0, alignItems:’flex-start’} style 设置默认箭头按钮的样式 nextButton ‹ element 自定义右箭头按钮样式 prevButton › element 自定义左箭头按钮样式

根据上面各属性的介绍，在前面引导页的基础上，隐藏左右箭头按钮，设置自动播放，调整页面的大小，即可实现广告栏的效果。

import React, { Component } from 'react'import {    Text,    View,    Image,    Dimensions} from 'react-native'import Swiper from 'react-native-swiper'const { width } = Dimensions.get('window')const styles = {    container: {        height:200    },    wrapper: {    },    slide: {        flex: 1,        justifyContent: 'center',        backgroundColor: 'transparent'    },    slide1: {        flex: 1,        justifyContent: 'center',        alignItems: 'center',        backgroundColor: '#9DD6EB'    },    slide2: {        flex: 1,        justifyContent: 'center',        alignItems: 'center',        backgroundColor: '#97CAE5'    },    slide3: {        flex: 1,        justifyContent: 'center',        alignItems: 'center',        backgroundColor: '#92BBD9'    },    text: {        color: '#fff',        fontSize: 30,        fontWeight: 'bold'    },    image: {        width,        height:200    }}export default class SwiperDemo2 extends Component {    render () {        return (            <View style={styles.container}>                <Swiper style={styles.wrapper} height={200} horizontal={true} autoplay={ true }>                    <View style={styles.slide1}>                        <Image resizeMode='stretch' style={styles.image} source={require('../images/1.jpg')} />                    </View>                    <View style={styles.slide2}>                        <Image resizeMode='stretch' style={styles.image} source={require('../images/2.jpg')} />                    </View>                    <View style={styles.slide3}>                        <Image resizeMode='stretch' style={styles.image} source={require('../images/3.jpg')} />                    </View>                </Swiper>            </View>        )    }}

renderPagination属性可修改分页器的元素，这里我们将圆点改为数字。
在标签中添加renderPagination元素。

 <Swiper style={styles.wrapper} height={200} horizontal={true} autoplay ={true} renderPagination={renderPagination}>

renderPagination方法返回一个Text显示页码

const renderPagination = (index, total, context) => {  return (    <View style={styles.paginationStyle}>      <Text style={{ color: 'grey' }}>        <Text style={styles.paginationText}>{index + 1}</Text>/{total}      </Text>    </View>  )}

添加它的样式：

   paginationStyle: {    position: 'absolute',    bottom: 10,    right: 10  },  paginationText: {    color: 'white',    fontSize: 20  }

效果如下:

示例源码地址:点这里