zoukankan      html  css  js  c++  java
  • 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,
        },
        wrapper: {
             width,
        },
        paginationStyle: {
        },
        dotStyle: {
             22,
            height: 3,
            backgroundColor:'#fff',
            opacity: 0.4,
            borderRadius: 0,
        },
        activeDotStyle: {
             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,
        },
        wrapper: {
             width,
        },
        paginationStyle: {
        },
        dotStyle: {
             22,
            height: 3,
            backgroundColor:'#fff',
            opacity: 0.4,
            borderRadius: 0,
        },
        activeDotStyle: {
             22,
            height: 3,
            backgroundColor:'#fff',
            borderRadius: 0,
        },
    });
    
    export default MainSwiper;
  • 相关阅读:
    数据库课程设计心得【3】存储过程的运用
    看BBC研究大脑的科教片中“放松产生灵感”的笔记
    成功干掉“恶心的U盘自动运行病毒免疫目录”!共享方法,让更多的人干掉这东西!
    分享一大堆最新dot net asp.net c# 电子书下载 , 英文原版的。经典中的经典
    SQL学习之 对GROUP BY 和 HAVING 的理解 学习笔记
    关于Theme中.skin与css需要理清的关系
    最近的学习笔记,记录一些通俗易懂的学习类文章。更像是好资料参与索引。
    关于DNN Module开发学习以来的一点总结
    工具发布!QQ空间阅读与备份工具
    被忽视的大道理
  • 原文地址:https://www.cnblogs.com/piaobodewu/p/9888594.html
Copyright © 2011-2022 走看看