React Native 的趨勢

React Native 是近來最熱門的技術熱點之一，RN的推廣勢必帶來一種新的開發思路，但目前來看RN並沒有預想的發展那樣快，還存在很多問題等待解決，作為Android開發人員瞭解一下RN還是很有必要的

文件

RN開發教程和文件還是很完善的，我是一般直接檢視官方文件。
RN官方文件

關於部署環境的步驟就不多做解釋了，按照文件一步步的走下來，就完全ok。

RN初次使用的各種坑

RN坑比較多是一大特點，作為Android開發人員，如果你已經可以預感到RN Android 比RN IOS 坑要多，說明你已經達標了。

DevSettingsActivity

由於許可權問題，RN的彈窗（設定屬性和開發模式的彈窗）需要顯示在其他應用之上的許可權，所以進入到RN專案時，RN檢測到沒有這個許可權的時候，會直接跳轉到DevSettingsActivity，DevSettingsActivity是RN內建的一個native 的頁面。

當你期待著一睹RN風采的時候，看到這樣的一個頁面想必是一臉懵逼，其實這個頁面只是需要你授權而已，找到我們的RN專案，點選之後看到下面的這個頁面。

開啟授權，返回，按理說你就要看到RN頁面了。

Could not get BatchedBridge, make sure your bundle is packaged correctly

沒想到的是，設定完授權後，返回看到了這樣一個頁面，血紅的背景，熟悉的堆疊結構，還是驚豔到了。

這個問題搜遍一搜，就可以搜到很多解決方式，咱們這裡也不是隨便貼一段命令列就結束了，主要還是想深入的瞭解一下這個錯誤是什麼問題。

先說說解決辦法，在終端中，進入到專案的根目錄，執行下面這段命令列：

react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets
 
-dest android/app/src/main/res/  

第一次執行這段命令列可能會出現

not find directory

一類的錯誤，其實仔細讀錯誤日誌就可以看得明白是沒有assents目錄，手動建立assents目錄，之後再次執行上面這段命令列。

看樣子是正確執行了

再次檢視專案目錄可以看到assents中多出來兩個檔案

再次run起來，這個錯誤就完美解決了。

解決是解決完了，回過頭來想一下這個錯誤和assents中的檔案index.android.bundle是做什麼用的，開啟index.android.bundle看看：

對於Android開發人員來講，可能覺得這簡直沒有辦法看得出來是什麼程式碼，如果你懂一些js的話，可以看得出來這裡面全是js指令碼，只是為了節省空間，使用了類似於webpack一類的命令，壓縮了原本便於檢視的js程式碼。

RN本就是使用js編寫，使用原生的控制元件來展示的一種策略，又有html的便捷性，又有原生的流暢性。

那這個index.android.bundle毫無疑問就是用來呼叫原生控制元件的js指令碼，每次當你改變了 index.android.js，你都需要使用上面的程式碼片段，來及時的更新index.android.bundle，然後打包才可以把新的index.android.js應用上，所以當沒有index.android.bundle檔案時，RN是無法執行的，到這裡你應該明白了這個問題的來龍去脈了。

RN頁面展示

然後你就看到了讓你賞心悅目的RN hello world頁面

怎麼樣，很開心吧。

仔細看RN的說明，你可以發現 To get started, edit index.android.js，意思很明確，你只需要編輯index.android.js就可以更改RN專案，index.android.js是程式的根本。

Double tap R on your keyboard to reload,Shake or press menu button for dev menu。

這樣一段話表明，你可以雙擊“R”來重新載入，也可以點選選單鍵或者是搖晃手機開啟開發選單。

到這裡你可能不太明白relaod是幹嘛用的，其實如果你深入的瞭解RN，就會明白，RN很重要的一個特性是不用發版就可以更改一些模組的展示，原理就是更改index.android.js，然後RN專案reload，下載新的index.android.js後，更新index.android.bundle，然後根據index.android.bundle展示新的頁面。

所以我們只要編輯index.android.js，點選reload，就可以更新頁面了，很酷有沒有。

當你點選reload時，又報錯了。

could not connect to development server

血紅的頁面又出現了。

頁面雖然很難看，但是錯誤資訊還是比較明確的，只要挨著檢查issue，就可以排查出問題所在。

排查後發現，ip地址不對，目前還是localhost，而不是充當伺服器的PC，所以要設定爭取的ip地址。

晃動手機，喚起設定屬性視窗，點選“Dev settings”:

在點選Debuug server host 出現設定ip地址視窗

填寫你自己的ip地址，如上圖所示。

這樣寫是不對的，你可以仔細看錯誤日誌：

填寫ip地址時不要忘記了埠號8081

正確的填寫方式應該是：

到這裡你才算是把坑趟的差不多了。

需要注意的小問題

如果你的目標URL是使用了domStorage，這樣的話是需要你設定Webview domStorageEnabled屬性為tru的。

否則載入不出來哈

希望能幫到你。