【React Native 实战】旋转图片验证码
来源:互联网 发布:网易云课堂 mac客户端 编辑:程序博客网 时间:2024/05/17 19:59
1.前言
蘑菇街用打乱方向的图片作为验证码,既起到了验证码的作用又宣传了图片,今天我们就用React Native来实现这样的功能。
转自http://www.cnblogs.com/zhangdw/p/6149127.html
2.属性
Image标签属性
resizeMode enum('cover', 'contain', 'stretch')
cover: 在保持图片宽高比的前提下缩放图片,直到宽度和高度都大于等于容器视图的尺寸(如果容器有padding内衬的话,则相应减去)。译注:这样图片完全覆盖甚至超出容器,容器中不留任何空白。
contain: 在保持图片宽高比的前提下缩放图片,直到宽度和高度都小于等于容器视图的尺寸(如果容器有padding内衬的话,则相应减去)。译注:这样图片完全被包裹在容器中,容器中可能留有空白
stretch: 拉伸图片且不维持宽高比,直到宽高都刚好填满容器。
source {uri: string}
uri是一个表示图片的资源标识的字符串,它可以是一个http地址或是一个本地文件路径(使用require(相对路径)来引用)。
Style 样式
运用Transforms,实现动态图片旋转操作
3.使用实例
注释:
1、this.state.imgData:存放的是验证码图片url地址和对应的方向,可以从服务器获取这块内容,做到每次验证码不同,同时也能起到宣传的作用
2、rotateImage:点击图片的时候触发,需要一个索引作为参数。通过索引修改对应的图片的方向,方向分别对应1上,2右,3下,4左
3、changeDireaction:动态的修改样式,需要一个方向作为参数,通过style的transform来实现
4、renderImage:循环创建四张图片作为验证码
5、styles.qImage: 样式表,主要是设置图片大小
qImg:{
width:82,
height:82
}
4.效果
- 【React Native 实战】旋转图片验证码
- react native 获取验证码
- React-Native实战系列
- react native实战
- React Native实战项目
- React Native实现验证码倒计时功能
- React Native 四:图片
- react-native加载图片
- React Native 生成图片
- React Native实战之ReactJS
- React Native 项目实战-Tamic
- react native 实战[商城DEMO]
- React Native 实战系列一
- React Native 实战系列二
- React Native 实战系列三
- 【React Native 实战】商品分类
- 【React Native 实战】二维码扫描
- React Native入门与实战
- HDU
- Android笔记(7)欢迎界面
- 读源码:commons-lang2.4的ArrayUtils类
- SQL SERVER相关的网站、资源和书籍
- python基础知识点
- 【React Native 实战】旋转图片验证码
- Servlet入门(一)
- Windows常用网络命令
- wireshark抓包遇到了ip total len = zero
- #100天计划#Day01------计算机语言的发展史
- 如何在Windows server上使用Node.js正常运行ZMQ库
- 整数的2的幂分解
- QFileInfo使用整理
- Oracle IN条件包含查询出来的列表和固定值的查询语句