IDE -> WebStorm

目前市面上的IDE，有知名的Sublime和jetbrains，其中jetbrains有一系列的IDE支持多種語言，如JAVA（IntelliJ IDEA）、Python（Pycharm）、Ruby（RubyMine）、Javascript/html/css（WebStorm），由于我本人長期開發Python，采用的是Pycharm，因此我個人傾向與采用WebStorm作為react native的IDE開發工具。

安裝到手機

1. 用usb線對接上 電腦 和 手機.
2. 查看設備是否已經連接.

   C:\Users\zhengtong>adb devices
   List of devices attached
   5b921483        device   
   

   注意：如果這里沒有列出任何東西, 請參考 問題記錄 的 1. adb device沒有列出任何東西.
3. 啟動項目

   C:\Users\zhengtong\WebstormProjects\rn_practice>react-native start
   C:\Users\zhengtong\WebstormProjects\rn_practice>react-native run-android
   

   注意：如果項目啟動過程中出現錯誤，請參考 問題記錄 的 2. 會話連接失敗.
4. 最終效果
   
   

   
   

   最終效果

Debugging(調試)

代碼寫完了之后，除了每次都重新安裝(react-native run-android)之外，還有另外一種方法可以直接發起重新加載最新文件內容。

• Reload
  如果是模擬器(Simulator)，那么就直接點擊模擬器窗口，然后快速按下兩次R，即可完成重新加載動作。
  如果是實體手機，則需要搖一搖手機，然后app會自動彈出一個懸浮窗口，只需點擊Reload即可完成重新加載動作。如果搖一搖不起作用，那請參考 問題記錄 的 3.
  
  

  
  

  紅米 Note 3
• Enable Live Reload
  開啟該功能之后，只要文件發生變化，則會即時的更新到手機設備上，這種場景適合調試樣式時開啟，不適合在開發功能時開啟。
• Console Log
  javascript/EcmaScript 的日志輸出是利用console.log('xxx')，在react native中也支持這種寫法，這有利于我們即時調試代碼時進行日志觀察。

  C:\Users\zhengtong\WebstormProjects\rn_practice>react-native log-android
  

問題記錄

1. adb devices沒有列出任何東西

這是因為手機默認情況下，不是開發者模式，需要去開啟開發者模式：
設置 -> 關于手機 -> MIUI版本(連續點擊7次即可變為開發者模式)
開啟開發者模式之后，仍需開啟USB連接:
設置 -> 系統和設備 -> 更多設置 -> 開發者選項 -> 開啟USB調試

2. 會話連接失敗

Installing APK 'app-debug.apk' on 'Redmi Note 3 - 5.1.1'
Unable to install C:\Users\zhengtong\WebstormProjects\rn_practice\android\app\build\outputs\apk\app-debug.apk
com.android.ddmlib.InstallException: Failed to establish session
        at com.android.ddmlib.Device.installPackages(Device.java:894)
        at com.android.builder.testing.ConnectedDevice.installPackages(ConnectedDevice.java:113)
        at com.android.builder.testing.ConnectedDevice$installPackages$0.call(Unknown Source)

解決辦法:
關閉 <MIUI優化>
設置 -> 系統和設備 -> 更多設置 -> 開發者選項 -> 啟用MIUI優化

參考網址: http://blog.csdn.net/eric_niezhangyu/article/details/51692297

3. 實體手機搖一搖沒有出現開發者菜單

授權顯示懸浮窗口
設置 -> 設備 -> 授權管理 -> 應用權限管理 -> 權限管理 -> 顯示懸浮窗 -> 找到并勾選允許react native項目app顯示懸浮窗口

參考網址: http://www.lcode.org/%E3%80%90react-native%E5%BC%80%E5%8F%91%E3%80%91react-native%E5%BA%94%E7%94%A8%E8%AE%BE%E5%A4%87%E8%BF%90%E8%A1%8Crunning%E4%BB%A5%E5%8F%8A%E8%B0%83%E8%AF%95debugging/

4. 無法連接開發服務器

正常情況下，調試APP時都是接上USB連接線，但是很多時候會因為一些事情而帶著手機離開電腦旁邊，當在回來接上USB后，搖一搖手機點擊Reload時會拋出異常錯誤（紅色屏幕），錯誤信息如下：

Could not connect to development server.

Try the following to fix the issue:
...
...
URL: http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false

解決辦法:

C:\Users\zhengtong\WebstormProjects\rn_practice>adb reverse tcp:8081 tcp:8081

通過上面這條命令，會告訴adb向手機發送指令，通知其服務可正常連接。