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

发布时间：2020-12-15 20:21:22 所属栏目：百科来源：网络整理

导读：效果图：直接上解决方案： 1、在Swiper标签外套一层View View style={styles.container} Swiper style={styles.wrapper} height={width*40/75} autoplayTimeout={2.5} // showButtons —— 是否显示左右翻页按钮 showsButtons={false} // autoPlay —— 是

效果图：

直接上解决方案：

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,});

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,wrapper: {
        width: width,paginationStyle: {
    },dotStyle: {
        width: 22,height: 3,backgroundColor:‘#fff‘,opacity: 0.4,borderRadius: 0,activeDotStyle: {
        width: 22,});

export default MainSwiper;

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!