React-Native開發中的坑點實錄

從移動開發的角度來講，iOS和Android都有本身的一些UI特性，因此react-native宣稱的寫一套代碼就能夠通用就是騙人的鬼話，實際開發中，你會發現不少控件在iOS和Android上展現的效果不同，或者有些屬性支持iOS不支持Android。react-native早期是隻支持iOS的，後來才支持的Android，因此直到如今react-native對iOS平臺的支持仍是比Android平臺要友好。

UI方面

• 1.textinput組件默認會在輸入框中加一條線，很難看，實際開發中，須要設置underlineColorAndroid='transparent'屬性，去掉Android系統下默認的線。

---

• 2.因爲iOS和android平臺本身的特性，致使同一個組件在iOS上能達到設計的UI效果，在android上有可能達不到效果，這種狀況就須要使用import {組件原名 as 別名} from '組件來源'，引入同名的第三方組件，針對不一樣的平臺進行UI的效果展現。

---

• 3.react-native對iOS支持了陰影效果，Android沒有，這種狀況下，只能找第三方組件進行支持，或者採用切圖的方式進行支持。

---

• 4.要實現毛玻璃效果，網上查了好多資料，都推薦react-native-blur這個庫，可是這個庫也是對iOS支持的很好，對Android就不是那麼友好。iOS端的支持組件嵌套的方式，並且不須要設置image的ref，就能夠實現毛玻璃效果，並且毛玻璃下層的視圖能夠動態展現（好比輪播圖）；Android的則不行，不能採用組件嵌套的方式，並且必定要設置圖片的ref，換言之，就是隻支持對一張靜態圖作毛玻璃效果。

---

• 5.對於鍵盤遮擋的處理，iOS和Android觸發的事件不同，因此須要針對不一樣的平臺進行單獨的處理。

---

• 6.當前組件的狀態的更新的時候，使用setstate()更新的時候，會致使本來應該顯示的Toast提示，不能顯示，這個時候應該在Toast顯示方法的回調中進行state的刷新。

方法支持的差別

實際開發的過程當中，會發現有一些方法，針對iOS有效果，Android平臺上，運行結果卻不同，這種狀況下，要麼再找一個兩端都支持的，要麼就是針對不一樣的平臺用不一樣的方法。

• 1.startWith()判斷字符串的前綴的，實際開發中的，發如今iOS平臺運行結果正確，Android運算結果不正確，打印數據，發現數據是正確的。因而就發現了startWith()對於android的http連接判斷不起做用,改用indexOf()這個包含字符串的方法後，兩端的運行結果都正確了。

---

• 2.對於空格的刪除，在實際開發中，須要對用戶輸入帳號和密碼時，輸入的空格進行刪除。實際操做的時候發現，Android平臺下，不管你連續輸入多少個空格，只要用戶停下輸入，使用正則表達式過濾字符串中的空格就能生效，實現刪除空格的效果；iOS平臺卻只能刪除一個空格，若是你連續輸入多個空格，中間會出現一個點，多餘的空格，正則表達式也不起效果。這一點打了iOS的臉啦。

redux框架的坑

redux框架採用狀態判斷的形式進行業務邏輯的處理。實際開發的工程中，必定要保證業務邏輯判斷的狀態不能有相同的狀況，不然很出現一些靈異的bug。我在開發登陸&註冊流程時，當時由於是不一樣的頁面，用的狀態的判斷是同樣的（註冊時的輸入驗證碼和忘記密碼時的輸入驗證碼，跳轉邏輯同樣）。因爲redux的AppState狀態是全局的，並且註冊到忘記這條線，走的是push頁面的方式。忘記密碼的時候，出現了push兩次輸入密碼框頁面的狀況，找了很久，經過打印頁面的跳轉方式，才從這個坑，從裏面爬出來。

這個bug出現的緣由是對redux這種全局狀態機制不瞭解，沒有把已經入棧頁面的狀態判斷方法屏蔽掉，致使後面走忘記密碼的時候，註冊頁面的跳轉密碼框的狀態知足的狀況下，也進行了跳轉。

總結

使用react-native進行開發，你必定要作好隨時遇到坑的準備，時刻準備着去填坑。react-native開發的路很漫長，過了這山還有那山。