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;