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

效果图：

直接上解决方案：

1、在Swiper标签外套一层View

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

<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的代码内容）

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69

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;