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

Posted 2021-01-16 piaobodewu

效果图：

直接上解决方案：

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;