react-native-swiper使用时候的小坑
react-native版本:0.61.1
react-native-swiper版本:1.5.14
当时第一次使用时候直接粘贴的别人博客的教程代码,只修改了swiper里面的元素,结果发现不能切换,点击下一张按钮,小圆点会跟着切换,但是元素却没有切换,一直保持在最后一张,折腾了半天,发现不能给Swiper元素的style里加width属性,高宽是直接被当做Swiper的属性赋予的
<Swiper
style={styles.wrapper}
showsButtons={true}
removeClippedSubviews={false} //这个很主要啊,解决白屏问题
autoplay={true}
horizontal ={true}
autoplayTimeout = {4}
loop = {true}
>
<Image source={{uri:'http://p1.music.126.net/DBN-pGDTN2_LPDnyCYonMA==/109951164474447712.jpg'}} style={styles.bannerImg} />
<Image source={{uri:'http://p1.music.126.net/5lcR4NT8Mu-CBQnpBTqn7w==/109951164474482743.jpg'}} style={styles.bannerImg} />
<Image source={{uri:'http://p1.music.126.net/krcK1qrj6fdcZ28DkXJlWw==/109951164474509253.jpg'}} style={styles.bannerImg} />
<Image source={{uri:'http://p1.music.126.net/YANzhLtF9LpgF17vuUHJ7g==/109951164475251428.jpg'}} style={styles.bannerImg} />
</Swiper>
wrapper:{
width:width * 0.9,//这行不能加
height:200,
backgroundColor:'red',
zIndex:10000,
overflow:'scroll'
},
bannerImg:{
width:width * 0.9,
height:200,
}
react-native-swiper使用时候的小坑的更多相关文章
- 第一个React Native程序踩到的那些坑
毫不夸张的说用React Native写一个Hello World !程序是我碰到最复杂的Hello World.网络上的有关的环境搭建相关的文档也很多,但是总是有这样那样的问题. 官方中文版的安装文 ...
- 移动端学习之理解WEB APP、Native APP、Hybrid APP以及React Native/uniapp包括H5、小程序等的区别与共通之处
因为工作需要,需要进一步了解移动端的开发,遂返回复习移动端的知识点,在开始学习之前,产生了疑惑WEB APP .Native APP .Hybrid APP.React Native.Uniapp.H ...
- React Native底|顶部导航使用小技巧
导航一直是App开发中比较重要的一个组件,ReactNative提供了两种导航组件供我们使用,分别是:NavigatorIOS和Navigator,但是前者只能用于iOS平台,后者在ReactNati ...
- React Native顶|底部导航使用小技巧
导航一直是App开发中比较重要的一个组件,ReactNative提供了两种导航组件供我们使用,分别是:NavigatorIOS和Navigator,但是前者只能用于iOS平台,后者在ReactNati ...
- React Native 生命周期及相关方法小技巧使用
ES6 生命周期图解 很多文章里的图解,第一步是 getDefaultProps , 第二步是 getinitialstate ,这是 ES5 的写法; 实际上ES6 中 getinitialstat ...
- 在 React Native 中使用 Redux 架构
前言 Redux 架构是 Flux 架构的一个变形,相对于 Flux,Redux 的复杂性相对较低,而且最为巧妙的是 React 应用可以看成由一个根组件连接着许多大大小小的组件的应用,Redux 也 ...
- react native window下的环境搭建和调试方案
这几天使用react native开发app,遇到一些坑,先记录下来,以后再继续补充 环境搭建 打开react native中文网,发现环境搭建特么也太复杂了,安装各种插件/软件,对于我们 编辑器+浏 ...
- React Native工作小技巧及填坑记录
以下是本人在React Native开发工作中使用的一些小技巧,记录一下. 1.从网络上拉取下来的React Native缺少React和React Native库. 终端 1. cd 项目根目录 2 ...
- React Native填坑之旅 -- 回归小插曲
回归RN,非常开心啊! 在React Native 0.49.5上开发,直接遇到一个ios模拟器的问题.这个问题很简单就是Bundle URL not present. 在网上找了很多的解决方法,都不 ...
- React Native 填坑一
React Native 填坑一 关于RN的布局 分为主轴和交叉轴, 主轴可以是横向也可以是竖向,交叉轴也是对应的. 主轴默认是竖向.如果要更改用flexdirection 主轴对齐方式:justif ...
随机推荐
- More Effective C++: 05技术(30-31)
30:Proxy classes 代理类 在C++中使用变量作为数组大小是违法的,也不允许在堆上分配多维数组: int data[dim1][dim2]; int *data = new int[di ...
- Selenium-----wait的三种等待
在UI自动化测试中,必然会遇到环境不稳定,网络慢的情况,这时如果你不做任何处理的话,代码会由于没有找到元素,而报错.这时我们就要用到wait(等待),而在Selenium中,我们可以用到一共三种等待, ...
- C#中的字段,常量,属性与方法
以前是学C++的,初次学微软的C#头都大了.什么字段,常量,属性,方法......微软把别人的东西拿来糅合在C#里,弄成了一个“大杂烩”.其实,说到底,“字段”不就是“变量”吗,所谓的“方法”不就是“ ...
- 洛谷P2820 局域网
#include<bits/stdc++.h> using namespace std; ; ; int n,k,sum,tot; struct node{ int cnt,fa; }f[ ...
- TCP/IP 、HTTP和SOCKET
TCP/IP协议概念 TCP/IP(Transmission Control Protocol/Internet Protocol)的简写,中文译名为传输控制协议/因特网互联协议,又叫网络通讯协议,这 ...
- 微信小程序 mode 的几种模式
mode="aspectFill" mode 有效值: mode 有 13 种模式,其中 4 种是缩放模式,9 种是裁剪模式. 模式 值 说明缩放 scaleToFill 不保持纵 ...
- UIImageView xib里面拉伸图片技巧
拉伸图片的时候代码里和xib里面的图片名字去掉@2x,但是原始图片文件得要xxx@2x.png The X and Y values seem to be the positions for the ...
- art-template web模板引擎引入JS函数
art-template语法 可以在模板引擎中加入自定义的函数; template.defaults.imports.LocalShortDate = LocalShortDate; 在模板引擎中的用 ...
- vscode golang vue配置
{ "files.autoSave": "off", "window.title": "${dirty}${activeEdito ...
- Jupyter Magic - Timing(%%time %time %timeit)
对于计时有两个十分有用的魔法命令:%%time 和 %timeit. 如果你有些代码运行地十分缓慢,而你想确定是否问题出在这里,这两个命令将会非常方便. 1.%%time 将会给出cell的代码运行一 ...