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,backgroundColor: '#97CAE5' },slide3: { flex: 1,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,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,alignItems: 'center',backgroundColor: '#9DD6EB'
    },slide2: {
        flex: 1,backgroundColor: '#97CAE5'
    },slide3: {
        flex: 1,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,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
  }

效果如下:

示例源码地址:点这里