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. JDBC操作数据库实例

    jdbc操作数据库实例 1.jdbc创建数据库 1.1 前提条件 1.拥有创建和删除表的权限 2.数据库已经启动,且可用 1.2 jdbc创建数据库表的步骤: 导包:导入需要进行数据库编程的 JDBC ...

  2. 使用virtualenv使得Python2和Python3并存

    1:下载python3源码并安装 wget https://www.python.org/ftp/python/3.6.4/Python-3.6.4.tgz .tgz cd Python-.tgz . ...

  3. windows10环境运用SSH和SwitchySharp自由翱翔

    以下纯干货: 安装篇: 安装git bash(自行去找下载包) 安装xshell(开始想用它,后来直接在git bash里用命令搞定了,安装它SSH Server就可用了可能) 安装Chrome的插件 ...

  4. JavaScript void

    我们经常会使用到 javascript:void(0) 这样的代码,那么在 JavaScript 中 javascript:void(0) 代表的是什么意思呢? javascript:void(0) ...

  5. 2015 Objective-C 三大新特性

    http://www.cocoachina.com/ios/20150617/12148.html Overview 自 WWDC 2015 推出和开源 Swift 2.0 后,大家对 Swift 的 ...

  6. iOS开发 分享到QQ空间提示"分享失败 应用不存在"

    本人遇到该问题的原因是配置SDK初始化时的APPID错误,可以参考下shareSDK的集成文档中的一段话: 可选:支持QQ所需的相关配置及代码 登录QQ互联(http://connect.qq.com ...

  7. 洛谷P1616 疯狂的采药

    //完全背包 #include<bits/stdc++.h> using namespace std; ; ; int n,m,v[maxn],w[maxn],f[maxv]; int m ...

  8. 07Redis入门指南笔记(主从复制、哨兵)

    现实项目中通常需要若干台Redis服务器的支持: 结构上,单个 Redis 服务器会发生单点故障,而且一台服务器需要承受所有的请求负载.这就需要为数据生成多个副本并分配在不同的服务器上: 容量上,单个 ...

  9. LOJ 10239 有趣的数列

    LOJ 10239 有趣的数列 首先可以将奇数视作入栈,偶数视作出栈,那么它是卡特兰数,其实打表也能看出来,而且好像可以用dp? 不过这道题的难点不在这里,p不是素数,所以不能用求逆元来做,不过前50 ...

  10. Android 错误:IllegalStateException: Can not perform this action after onSaveInstanceState

    今天做Fragment切换.状态保存功能的时候,出现了这个错误: E/AndroidRuntime(12747): Caused by: java.lang.IllegalStateException ...