react-native-swiper設定高度的方法（設定rn輪播圖所佔高度）

標籤：size   har   內容   container   使用   技術分享   swiper   按鈕   native   

：

直接上解決方案：

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;

react-native-swiper設定高度的方法（設定rn輪播圖所佔高度）