react-native-swiper设定高度的方法（设置rn轮播图所占高度）

效果图：

直接上解决方案：

1、在Swiper标签外套一层View

<View style={styles.container}> <Swiper style={styles.wrapper} height={width*40/75} autoplayTimeout={2.5} // showButtons —— 是否显示左右翻页按钮 showsButtons={false} // autoPlay —— 是否自动播放 autoplay={true} // paginationStyle —— 包含小点点的容器的样式，这里用来调整位置 paginationStyle={styles.paginationStyle} // dotStyle —— 小点点的样式 dotStyle={styles.dotStyle} // activeDotStyle —— 当前被激活的小点点的样式 activeDotStyle={styles.activeDotStyle} > <Image source={require('../img/mainSwiper/swiper1.jpg')} style={styles.bannerImg} /> <Image source={require('../img/mainSwiper/swiper2.jpg')} style={styles.bannerImg} /> <Image source={require('../img/mainSwiper/swiper3.jpg')} style={styles.bannerImg} /> </Swiper> </View>

　　

2、在View的style中设置高度

const styles = StyleSheet.create({ container: { backgroundColor: "#f3f3f3" , height:width*40/75, }, bannerImg: { height: width*40/75, width: width, }, wrapper: { width: width, }, paginationStyle: { }, dotStyle: { width: 22, height: 3, backgroundColor:'#fff', opacity: 0.4, borderRadius: 0, }, activeDotStyle: { width: 22, height: 3, backgroundColor:'#fff', borderRadius: 0, }, });

 

3、注意style中不要使用flex。

 

4、完整版轮播图代码（下面即为MainSwiper.js的代码内容）

import React,{Component} from 'react' import Swiper from 'react-native-swiper'; import { Image, View, StyleSheet, Dimensions, } from 'react-native'; let {width} = Dimensions.get('window'); class MainSwiper extends Component{ render(){ return( <View style={styles.container}> <Swiper style={styles.wrapper} height={width*40/75} autoplayTimeout={2.5} // showButtons —— 是否显示左右翻页按钮 showsButtons={false} // autoPlay —— 是否自动播放 autoplay={true} // paginationStyle —— 包含小点点的容器的样式，这里用来调整位置 paginationStyle={styles.paginationStyle} // dotStyle —— 小点点的样式 dotStyle={styles.dotStyle} // activeDotStyle —— 当前被激活的小点点的样式 activeDotStyle={styles.activeDotStyle} > <Image source={require('../img/mainSwiper/swiper1.jpg')} style={styles.bannerImg} /> <Image source={require('../img/mainSwiper/swiper2.jpg')} style={styles.bannerImg} /> <Image source={require('../img/mainSwiper/swiper3.jpg')} style={styles.bannerImg} /> </Swiper> </View> ) } } const styles = StyleSheet.create({ container: { backgroundColor: "#f3f3f3" , height:width*40/75, }, bannerImg: { height: width*40/75, width: width, }, wrapper: { width: width, }, paginationStyle: { }, dotStyle: { width: 22, height: 3, backgroundColor:'#fff', opacity: 0.4, borderRadius: 0, }, activeDotStyle: { width: 22, height: 3, backgroundColor:'#fff', borderRadius: 0, }, }); export default MainSwiper;

转载于:https://www.cnblogs.com/piaobodewu/p/9888594.html