React-Native之swiper(轮播组件)
使用说明:
1. 先安装React-native-swiper
npm i react-native-swiper –save
2. 导入Swiper
import Swiper from ‘react-native-swiper’;


1. 先安装React-native-swiper
npm i react-native-swiper –save
2. 导入Swiper
import Swiper from ‘react-native-swiper’;
代码:
import React, {Component} from 'react' import { StyleSheet, Text, View } from 'react-native' import Swiper from 'react-native-swiper' const styles =StyleSheet.create( { wrapper: { }, //整体样式 slide1: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#9bebe5' }, slide2: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#e3b1e5' }, slide3: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#90d985' }, text: { color: '#ff6fa3', fontSize: 30, fontWeight: 'bold' } }); export default class HomePage extends Component{ render(){ return( <Swiper style={styles.wrapper} showsButtons={true} //显示控制按钮 loop={true} //如果设置为false,那么滑动到最后一张时,再次滑动将不会滑到第一张图片。 autoplay={true} //自动轮播 autoplayTimeout={3} //每隔3秒切换 dot={<View style={{ //未选中的圆点样式 backgroundColor: 'rgba(0,0,0,0.2)', width: 18, height: 18, borderRadius: 4, marginLeft: 10, marginRight: 9, marginTop: 9, marginBottom: 9, }}/>} activeDot={<View style={{ //选中的圆点样式 backgroundColor: '#83ffcf', width: 18, height: 18, borderRadius: 4, marginLeft: 10, marginRight: 9, marginTop: 9, marginBottom: 9, }}/>} > <View style={styles.slide1}> <Text style={styles.text}>青衣</Text> </View> <View style={styles.slide2}> <Text style={styles.text}>冷秋</Text> </View> <View style={styles.slide3}> <Text style={styles.text}>听雨</Text> </View> </Swiper> ) } };
效果:
带有图片的轮播:
import React, { Component } from 'react' import { View, Image, Dimensions, StyleSheet } from 'react-native' import Swiper from 'react-native-swiper'; const { width, height } = Dimensions.get('window');//获取手机的宽和高 const styles =StyleSheet.create( { wrapper: { }, container: { flex: 1,//必写 }, image: { width,//等于width:width height, } }); export default class HomePage extends Component { render () { return ( <View style={styles.container}> <Swiper style={styles.wrapper} showsButtons={true} //为false时不显示控制按钮 paginationStyle={{ //小圆点位置 bottom: 70 }} loop={false} //如果设置为false,那么滑动到最后一张时,再次滑动将不会滑到第一张图片。 autoplay={true} //自动轮播 autoplayTimeout={2} //每隔2秒切换 > <Image style={styles.image} source={require('../images/1.jpg')}/> <Image style={styles.image} source={require('../images/2.jpg')}/> <Image style={styles.image} source={require('../images/4.jpg')}/> </Swiper> </View> ) } }