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

來源:互聯網
上載者:User

標籤: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輪播圖所佔高度)

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.