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的各个属性。

属性介绍

基本属性

自定义样式

Pagination分页

autoPlay自动切换

控制按钮

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

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
  }

效果如下:

示例源码地址:点这里