【React-Native】windows環境下Android真機除錯指南
推薦使用IntelliJ IDEA作為react-native專案的IDE，它兼有Android Studio和WebStorm的功能，也就是既支援安卓開發同時也支援web開發（包括react的jsx語法），且除錯起來相當方便。
準備工作
- 下載安卓SDK。
- 安裝配置IDEA。
- 一個rn專案。
- 一臺安卓手機，需開啟USB除錯。
真機除錯
在專案根目錄下shift+右鍵 -> 在此處開啟命令列，輸入adb devices檢視已經連線的裝置。
$ adb devices List of devices attached emulator-5554 offline # Google模擬器 14ed2fcc device # 真實裝置
在右邊那列看到device說明你的裝置已經被正確連線了。注意，你只應當連線僅僅一個裝置。
現在你可以執行react-native run-android來在裝置上安裝並啟動應用了。
$ react-native run-android除錯時出現錯誤
遇到錯誤不要慌，rn雖然仍然有不少坑，但基本網上都有解決方案可以查到的。本著“授人以魚不如授人以漁”的道理，我們來看一下下面這個錯誤，希望大家能夠學會獨立解決問題的思路，而不是單純地解決這一問題。
這是一個真機除錯時經常遇到的問題， 認真閱讀最上面的白字，意思是不能從index.android.bundle資源中載入script，並確認是否打包正確以及服務是否在執行。已經說的很明白了不是打包出了問題就是服務出了問題，所以作為程式設計師，還是有必要學好英語，或者動動手google翻譯一下也好。
那麼我們就先看一眼打包是否成功了。
很明顯，BUILD SUCCESSFUL 生成成功。那我們就再看一下服務。
到這裡成手就應該發現問題了，這裡本來應該有一行載入服務的過程，可是這裡卻沒有，也就是說，裝置根本沒有連線到服務上，但是服務本身也沒報錯誤。不過新手第一次執行是不一定會知道怎麼回事的。
沒關係網上肯定有答案，我們搜尋一下"unable to load script from assets ‘index.android bundle’ ,make sure your bundle is packaged correctly or youu’re runing a packager server"，找到匹配度高的條目，一般第一條就是（其實這答案不靠譜，沒必要執行這兩步，一會兒我會給真正的解決方法）
嘗試了執行一下，報錯。
error: option '--entry-file' missing
真不靠譜，換一個文章吧！於是開啟搜尋的第二條。原來正確的命令是這樣的。
$ react-native bundle --platform android --dev false --entry-file index.js --bundle-output
android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/resOK，執行完命令，再run-android，頁面出來了 ：）
不過別高興的太早，頁面顯示的不是Hello World. 而是Welcome to React Native! 找到App.js檔案改成Hello World!
然後需要重新整理頁面，這時不需要再run-android了，Reload就行（搖一搖你的手機或者點手機選單鍵，會彈出下面選單，選擇Reload）。
等等，怎麼報錯了？
報錯Could not connect to development server. 這裡就不得不說下，之前提到了我們的問題其實是裝置上的app沒連線上服務。再看下剛才的命令都是對打包的處理，由此判斷剛才執行的命令其實根本沒有解決我們的問題。
好了，在reload之後，錯誤提示更明顯了，我們就尋求真正的解決方案吧！再細讀一下提示的解決方法，注意到這一句。
If your device is on the same Wi-Fi network, set 'Debug server host & port for device' in 'Dev Settings' to your machine's IP address and the port of the local dev server - e.g.10.0.1.1:8081
這句話的意思是如果你的裝置同你的服務在同一個wifi環境下，設定開發服務主機和埠號為你本地服務的IP地址。試一下看看行不行。搖一搖你的手機或者點選手機選單鍵 -> 選擇Dev Settings -> 選擇Debug server host & port for device -> 輸入你電腦的ip地址和埠號（如：192.168.0.1:8081）
設定完再Reload一次，成功了！還是錯誤提示相對靠譜些。
同時也證明了確實是裝置沒連線到服務。
根據解決這個問題的過程和結果，我們總結一下基本思路：
- 先看錯誤提示，分析可能是哪幾種情況導致的錯誤；
- 看看提示中是否有解決方案，如果有則根據第一步的推測選擇合適的方案嘗試解決錯誤，如果嘗試無效，就每個方案都試一下；
- （補充）還是沒能解決錯誤或者摸不著頭腦的時候，可以上react-native官方GitHub上查詢答案或提問；
- 沒找到答案又不想提問等太久，自行Google/Baidu關鍵字。
遵循這個思路基本可以解決大部分問題，如果真的遇到不可解決的bug，也就只能去github上提問或者想一些其他的解決方案了。
IDEA配置
設定JSX語法
剛剛安裝好IDEA的同學會發現開啟App.js的檔案時，會提示各種語法錯誤，並且能看到這樣一個提示。
只要點選右側的switch即可。那如果點了dismiss怎麼辦啊？彆著急，也能在設定裡找到。點選選單欄 File -> Settings -> 展開左側 Languages & Frameworks -> 點選 JavaScript -> 右側 JavaScript language version 選擇 React JSX。
顯示Logcat
log 作為開發中使用最頻繁的功能之一，當然是越方便除錯越好。
react-native 自帶log功能，在 run-android 後開啟一個新的命令列 log-android 即可，不過這樣很不方便，服務一斷就需要重新輸一遍命令，這時候就推薦使用強大的IDEA了。
IDEA有一個Logcat視窗，可以實時監聽 log，不但能顯示Android原生程式碼的log，還能顯示react-native的log，只是預設情況下，你是看不到Logcat的。
怎麼配置呢？點選IDEA右上角下圖中的這個圖示開啟 Project Structure，當然你也可以通過快捷鍵 Ctrl+Alt+Shift+S來開啟，或者點選選單欄 File -> Project Structure。
開啟後的Project Structure是這樣的。
第一步就是選擇Project SDK。選擇左側Project，在右側的Project SDK選擇SDK，如 Android API 26 Platform (java version "1.8.0_172") ，然後Apply。
第二步檢視資源是否完整。選擇左側的Modules，右側選擇Sources選項卡，檢視Mark as: 後面是否有 Sources,Tests,Resources,Test Resopurces,Excluded，通常情況下是有的，如果沒有則點選中間欄中"-"按鈕刪除當前專案的Modules配置，再點選"+"按鈕選擇 Import Module 匯入專案，匯入時選擇 Import module from external model -> 選擇 Gradle -> Next -> 選擇 Use gradle 'wrapper' task configuration （其他保持預設即可） -> Finish。如果還沒有 Mark as ，則選擇 Language level。最後Apply。
第三步新增Android。點選中間欄中的專案 -> 點選"+"按鈕 -> 選擇 Android。檢查下右側路徑是否正確，一般是沒問題的。
最後，點選 OK 按鈕。
Logcat簡單使用
如圖：
- Logcat視窗的切換按鈕，只要進行了上面的配置，這裡就會新出現這個切換按鈕。Logcat視窗中會顯示當前裝置執行app時的所有log，包括react-native的log。
- 當前裝置。
- 選擇log級別，可以切換Debug/Info/Warn/Error等級別。
- 搜尋log，輸入想要查詢的某個log關鍵字，可以快速地在滿篇的log中篩選出想要看的log。比如，我只想看rn的log，那麼就輸入ReactNativeJS即可。
總結
我們想要除錯解決問題， 重要的還是學會看官方的提示和文件，學會藉助工具提高效率。