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
}
效果如下:
示例源码地址:点这里