【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.使用实例

http://images2015.cnblogs.com/blog/386844/201612/386844-20161209133139382-2008708303.png

注释：

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.效果

http://images2015.cnblogs.com/blog/386844/201612/386844-20161209135631538-1803935914.gif