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*/,
width: width,
},
wrapper: {
width: width,
},
paginationStyle: {
},
dotStyle: {
width: ,
height: ,
backgroundColor:'#fff',
opacity: 0.4,
borderRadius: ,
},
activeDotStyle: {
width: ,
height: ,
backgroundColor:'#fff',
borderRadius: ,
},
});
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轮播图所占高度)的更多相关文章
- element-ui中轮播图自适应图片高度
哈哈,久违了各位.我又回来了,最近在做毕设,所以难免会遇到很多问题,需要解决很多问题,在万能的博友帮助下,终于解决了Element-ui中轮播图的图片高度问题,话不多说上代码. 那个axios的使用不 ...
- ReactNative新手学习之路04 组件化开发轮播图swiper支持安卓和IOS
react native 新手之路04 组件化开发轮播图swiper支持安卓和IOS npm install react-native-carousel --save git 地址Properties ...
- swiper 轮播图,拖动之后继续轮播
在此贴出swiper官网地址:https://www.swiper.com.cn/api/index.html 示例如下(官网示例): <script> var mySwiper = ne ...
- React Native 之轮播图swiper组件
注释:swiper组件是第三方组件 所以在使用之前应该先在命令行安装,然后将第三方的模块引入(第三方模块地址:https://github.com/leecade/react-native-swipe ...
- React Native填坑之旅--重新认识RN
如同黑夜里的一道光一样,就这么知道了F8. F8是每年一次Facebook每年一次的开发者大会.每次大会都会release相应的APP,iOS.Android都有.之前都是用Native开发的,但是2 ...
- 微信小程序之swiper轮播图中的图片自适应高度
小程序中的轮播图很简单,官方都有例子的,但是唯一的缺陷就是swiper是固定死的150px高度,这样如果传入的图片大于这个高度就会被隐藏.辣么,怎样让图片自适应不同分辨率捏. 我的思路是:获取屏幕宽度 ...
- React Native学习(六)—— 轮播图
本文基于React Native 0.52 Demo上传到Git了,有需要可以看看,写了新内容会上传的.Git地址 https://github.com/gingerJY/React-Native-D ...
- React Native 如何做轮播图 react-native-swiper
//:仿饿了么github:https://github.com/stoneWeb/elm-react-native 欢迎各位同学加入: React-Native群:397885169 大前端群:54 ...
- React Native布局实践:开发京东client首页(三)——轮播图的实现
上篇文章中,我们一起构建了京东client的TabBar.在本文中.将继续向大家介绍京东client首页轮播图及其下发功能button的开发方法,如今就让我们開始吧! 1.相关控件调研 眼下在Gith ...
随机推荐
- 使用PHP 格式化时间
date 用法: date(格式,[时间]); 如果没有时间参数,则使用当前时间. 格式是一个字符串,其中以下字符有特殊意义: U 替换成从一个起始时间1970年1月1日以来的秒数 <?php ...
- DOS导出文件夹或文件名
dir /s /w >a.txt 应用dos导出当前目录下的文件夹名称(包括子目录,但是不包括文件,仅仅导出文件夹) dir /s/b/a:d >a.txt
- QT学习之路DAY1之初学QT的小项目
以下所有代码均利用软件QT5编写 项目一:Hello world! 利用QTcreator创建项目 修改main.cpp代码为 #include "mainwindow.h" #i ...
- 按照教程自动安装RFNoC时.在使用pip安装pybombs时出现报错,解决办法
$ sudo apt-get install git $ sudo apt-get install python-setuptools python-dev python-pip build-esse ...
- jdk8 时间日期工具类(转)
package com.changfu.common.util; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import jav ...
- log4j.xml常用配置
Log4J的配置文件(Configuration File)就是用来设置记录器的级别.存放器和布局的,它可接key=value格式的设置或xml格式的设置信息.通过配置,可以创建出Log4J的运行环境 ...
- [AngularJS] Decorator pattern for code reuse
Imaging you have a large application, inside this large application you have many small individual a ...
- Java对象间的关系
1 综述 在Java中对象与对象的关系总体分为四类,分别是:依赖.关联.聚合和组合. (1)依赖(Dependency)关系是类与类之间的联接.依赖关系表示一个类依赖于另一个类的定义,一般而言,依赖关 ...
- Luogu P3527 [POI2011]MET-Meteors 整体二分
思路:整体二分 提交:4次 错因:树状数组开的$int$ 题解: 二分操作序列,将仅用$[l,md]$即可满足要求的国家递归到左半边,将仅用$[l,md]$不能满足要求的国家,把他们的要求去掉左半边的 ...
- BZOJ 1097: [POI2007]旅游景点atr 状态压缩+Dijkstra
题解: $k<=20,$ 考虑状压dp. 从 $1$ 号点走到 $n$ 号点经过的点的个数可能会非常多,但是强制要求经过的点一共才 $20$ 个. 而我们发现这个题好就好在可以经过某个城市,而不 ...