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

注釋：

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