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使用时候的小坑的更多相关文章

  1. 第一个React Native程序踩到的那些坑

    毫不夸张的说用React Native写一个Hello World !程序是我碰到最复杂的Hello World.网络上的有关的环境搭建相关的文档也很多,但是总是有这样那样的问题. 官方中文版的安装文 ...

  2. 移动端学习之理解WEB APP、Native APP、Hybrid APP以及React Native/uniapp包括H5、小程序等的区别与共通之处

    因为工作需要,需要进一步了解移动端的开发,遂返回复习移动端的知识点,在开始学习之前,产生了疑惑WEB APP .Native APP .Hybrid APP.React Native.Uniapp.H ...

  3. React Native底|顶部导航使用小技巧

    导航一直是App开发中比较重要的一个组件,ReactNative提供了两种导航组件供我们使用,分别是:NavigatorIOS和Navigator,但是前者只能用于iOS平台,后者在ReactNati ...

  4. React Native顶|底部导航使用小技巧

    导航一直是App开发中比较重要的一个组件,ReactNative提供了两种导航组件供我们使用,分别是:NavigatorIOS和Navigator,但是前者只能用于iOS平台,后者在ReactNati ...

  5. React Native 生命周期及相关方法小技巧使用

    ES6 生命周期图解 很多文章里的图解,第一步是 getDefaultProps , 第二步是 getinitialstate ,这是 ES5 的写法; 实际上ES6 中 getinitialstat ...

  6. 在 React Native 中使用 Redux 架构

    前言 Redux 架构是 Flux 架构的一个变形,相对于 Flux,Redux 的复杂性相对较低,而且最为巧妙的是 React 应用可以看成由一个根组件连接着许多大大小小的组件的应用,Redux 也 ...

  7. react native window下的环境搭建和调试方案

    这几天使用react native开发app,遇到一些坑,先记录下来,以后再继续补充 环境搭建 打开react native中文网,发现环境搭建特么也太复杂了,安装各种插件/软件,对于我们 编辑器+浏 ...

  8. React Native工作小技巧及填坑记录

    以下是本人在React Native开发工作中使用的一些小技巧,记录一下. 1.从网络上拉取下来的React Native缺少React和React Native库. 终端 1. cd 项目根目录 2 ...

  9. React Native填坑之旅 -- 回归小插曲

    回归RN,非常开心啊! 在React Native 0.49.5上开发,直接遇到一个ios模拟器的问题.这个问题很简单就是Bundle URL not present. 在网上找了很多的解决方法,都不 ...

  10. React Native 填坑一

    React Native 填坑一 关于RN的布局 分为主轴和交叉轴, 主轴可以是横向也可以是竖向,交叉轴也是对应的. 主轴默认是竖向.如果要更改用flexdirection 主轴对齐方式:justif ...

随机推荐

  1. jsp中的标签使用

    jsp中的变量作用域 表示变量的作用域,一共4种.pageScope:  表示变量只能在本页面使用.requestScope:表示变量能在本次请求中使用.sessionScope:表示变量能在本次会话 ...

  2. hdu1848 sg打表

    果然是神器. #include<stdio.h> #include<string.h> #define maxn 1002 ],sg[maxn],hash[maxn]; voi ...

  3. java.lang.StackOverflowError 解决办法

    java.lang.StackOverflowError com.sxt.servlet.servlet1.LoginServlet.doGet(LoginServlet.java:15) com.s ...

  4. HTML5八大特性助力移动WebApp开发

    http://www.cocoachina.com/webapp/20150906/13344.html WebApp的实现基础就是HMTL5+JS+CSS3,但是WebApp还是基于浏览器的微网站开 ...

  5. Ubuntu18.10创建软件图标

    解压下载包都/opt目录 创建并编辑/usr/share/applications/xxx.desktop [Desktop Entry] Encoding=UTF-8 Name=Pycharm Co ...

  6. POLARDB 2.0 重磅升级,分别支持Oracle与PostgreSQL

    点击订阅新品发布会! 新产品.新版本.新技术.新功能.价格调整,评论在下方,下期更新!关注更多内容,了解更多 最新发布 POLARDB 2.0 重磅升级 2019年6月19日15时,阿里云 POLAR ...

  7. Android系列之Android 命令行手动编译打包详解

    Android 命令行手动编译打包过程图 [详细步骤]: 1使用aapt生成R.java类文件:  例:  E:\androidDev\android-sdk-windows2.2\tools> ...

  8. 15-8 pymysql的使用

    一 安装pymysql模块 1 pycharm安装 file-setting如图:然后点加号,搜索pymsql即可,点击安装 2 pip 安装 pip3 install pymysql 二  连接数据 ...

  9. @loj - 2196@「SDOI2014」Lis

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定序列 A,序列中的每一项 Ai 有删除代价 Bi 和附加属性 ...

  10. IP地址、域名、DNS、URL图解