【React Native 实战】旋转图片验证码

1.前言
蘑菇街用打乱方向的图片作为验证码,既起到了验证码的作用又宣传了图片,今天我们就用React Native来实现这样的功能。

2.属性

Image标签属性
resizeMode enum('cover', 'contain', 'stretch')

cover: 在保持图片宽高比的前提下缩放图片,直到宽度和高度都大于等于容器视图的尺寸(如果容器有padding内衬的话,则相应减去)。译注:这样图片完全覆盖甚至超出容器,容器中不留任何空白。
contain: 在保持图片宽高比的前提下缩放图片,直到宽度和高度都小于等于容器视图的尺寸(如果容器有padding内衬的话,则相应减去)。译注:这样图片完全被包裹在容器中,容器中可能留有空白
stretch: 拉伸图片且不维持宽高比,直到宽高都刚好填满容器。

source {uri: string}

uri是一个表示图片的资源标识的字符串,它可以是一个http地址或是一个本地文件路径(使用require(相对路径)来引用)。

Style 样式
运用Transforms,实现动态图片旋转操作

3.使用实例

【React Native 实战】旋转图片验证码

注释:

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 实战】旋转图片验证码

上一篇:LINUX服务器下用root登录ftp


下一篇:5、手把手教React Native实战之盒子模型BoxApp