1.前言
蘑菇街用打亂方向的圖片作為驗(yàn)證碼，既起到了驗(yàn)證碼的作用又宣傳了圖片，今天我們就用React Native來(lái)實(shí)現(xiàn)這樣的功能。

2.屬性

Image標(biāo)簽屬性
resizeMode enum('cover', 'contain', 'stretch')

cover: 在保持圖片寬高比的前提下縮放圖片，直到寬度和高度都大于等于容器視圖的尺寸（如果容器有padding內(nèi)襯的話，則相應(yīng)減去）。譯注：這樣圖片完全覆蓋甚至超出容器，容器中不留任何空白。
contain: 在保持圖片寬高比的前提下縮放圖片，直到寬度和高度都小于等于容器視圖的尺寸（如果容器有padding內(nèi)襯的話，則相應(yīng)減去）。譯注：這樣圖片完全被包裹在容器中，容器中可能留有空白
stretch: 拉伸圖片且不維持寬高比，直到寬高都剛好填滿容器。

source {uri: string}

uri是一個(gè)表示圖片的資源標(biāo)識(shí)的字符串，它可以是一個(gè)http地址或是一個(gè)本地文件路徑（使用require(相對(duì)路徑)來(lái)引用）。

Style 樣式
運(yùn)用Transforms,實(shí)現(xiàn)動(dòng)態(tài)圖片旋轉(zhuǎn)操作

3.使用實(shí)例

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

注釋：

1、this.state.imgData：存放的是驗(yàn)證碼圖片url地址和對(duì)應(yīng)的方向，可以從服務(wù)器獲取這塊內(nèi)容，做到每次驗(yàn)證碼不同，同時(shí)也能起到宣傳的作用

2、rotateImage：點(diǎn)擊圖片的時(shí)候觸發(fā)，需要一個(gè)索引作為參數(shù)。通過(guò)索引修改對(duì)應(yīng)的圖片的方向，方向分別對(duì)應(yīng)1上，2右，3下，4左

3、changeDireaction:動(dòng)態(tài)的修改樣式，需要一個(gè)方向作為參數(shù)，通過(guò)style的transform來(lái)實(shí)現(xiàn)

4、renderImage:循環(huán)創(chuàng)建四張圖片作為驗(yàn)證碼

5、styles.qImage: 樣式表，主要是設(shè)置圖片大小

qImg:{
width:82,
height:82
}

4.效果

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