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 ...
随机推荐
- [ 转]Linux进程关系
作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! Linux的进程相互之间有一定的关系.比如说,在Linux进程基础中,我们看到,每 ...
- 中国境内PE\VC\投资公司名单
中国境内PE\VC\投资公司名单 1.青云创投 2.高盛 3.红杉资本 4.鼎晖创投 5.枫丹国际 6.派杰投资银行 7.凯雷投资 8.长安私人资本 9.格林雷斯 10.汉能资本 11.启明创投 12 ...
- LeetCode153 Find Minimum in Rotated Sorted Array. LeetCode162 Find Peak Element
二分法相关 153. Find Minimum in Rotated Sorted Array Suppose a sorted array is rotated at some pivot unkn ...
- Extended Traffic
题目链接 题意:有n个路口,m条通路,如果经过一条路则会得到(终点 - 起点)^3的权值,求从1点到其他点的最小权值,如果权值小于3或无法到达输出'?'. 题解:因为权值可能为负,所以用SPFA来解题 ...
- 数据节点Datanodes
- <肖申克的救赎>观后感
肖申克的救赎主要讲述了银行家安迪在不健全的法律制度下被陷害进入了--鲨堡监狱,最后为了重见光明.追求自由,实现“自我救赎”的故事. 1.希望是件好东西,也许是世上最好的东西.好东西从来不会流逝. Ho ...
- 03寻找最小的k个数
题目描述:查找最小的k个元素 题目:输入n个整数,输出其中最小的k个. 例如输入1,2,3,4,5,6,7和8这8个数字,则最小的4个数字为1,2,3和4. 1:最简单 ...
- @codechef - MXMN@ Maximum and Minimum
目录 @description@ @solution@ @accepted code@ @details@ @description@ 定义函数 f(G, x, y) 为 G 中点 x 和点 y 之间 ...
- H3C SSH配置例子
- @bzoj - 4382@ [POI2015] Podział naszyjnika
目录 @description@ @solution@ @accepted code@ @details@ @description@ 长度为 n 的一串项链,每颗珠子是 k 种颜色之一. 第 i 颗 ...