# # 轉載請標明出處： [http://blog.csdn.net/developer_jiangqq/article/details/50508534](http://blog.csdn.net/developer_jiangqq/article/details/50508534) 本文出自:[【江清清的博客】](http://blog.csdn.net/developer_jiangqq) # (一)前言??????? ????????【好消息】個人網站已經上線運行,后面博客以及技術干貨等精彩文章會同步更新，請大家關注收藏:[http://www.lcode.org](http://www.lcode.org/) ? ? ? ?前面的課程我們已經對React Native的環境搭建以及開發的IDE做了相關的講解，今天我們的主要講解的是應用設備運行(Running)以及調試方法(Debugging)。本節的前提條件就是大家已經搭建了React Native的相關環境。如果沒有請關注第一講([點擊進入](http://blog.csdn.net/developer_jiangqq/article/details/50456967))。 ???????? 剛創建的React Native技術交流群(282693535),歡迎各位大牛,React Native技術愛好者加入交流!同時博客左側歡迎微信掃描關注訂閱號,移動技術干貨,精彩文章技術推送! # (二)創建React Native項目?? ??????? 需要運行和調試應用，首先我們需要使用react-native init xxproject來創建一個項目，這個步驟雖然在之前我們已經講過了，不過這邊在演示一下。 ??????? 2.1.命令行運行:react-native init TestOne?? [注].該命令創建項目時間有時候會比較耗時，一般幾分鐘吧，請耐心等待!運行日志截圖如下:  ?????? 2.2.在相應目錄生成項目，項目的目錄機構如下:  ????? 2.3.最后我們通過IDE引入該項目(Atom或者WebStorm)，進行編寫代碼即可。 # (三)應用設備運行(Running) ???????? [注意].如果你需要應用運行在真機設備中，那么我們首先設備要開啟USB調試模式。具體真機怎么樣打開USB調試模式，請百度哈([點擊打開USB調試模式](https://www.baidu.com/s?wd=%E5%AE%89%E5%8D%93%E6%89%93%E5%BC%80usb%E8%B0%83%E8%AF%95)) ???????? 真機打開USB調試模式之后，然后連接電腦，命令行adb devices可以查看當前的設備列表信息，不過我現在電腦沒有連接真機，所有只有會顯示模擬器信息了。??????  現在大家可以看到里邊有一臺設備已經連接了，不過如果我們需要運行應用的話，那我們必須確保當前只有一臺設備已經連接即可了。接下來我們命令行運行以下命令: ~~~ react-native run-android ~~~  接著就是開始編譯代碼，然后運行程序到設備中了。 [注意] 在真機上運行時可能會遇到白屏的情況，請找到并開啟懸浮窗權限。比如小米系統設置([點擊設置](http://jingyan.baidu.com/article/f25ef25466c0fc482d1b824d.html)) ??????? 3.1.從設備上面訪問實時服務器數據(這邊服務器指本地代碼) 當我們啟動開發服務的情況下，我們可以通過以下兩種方法來更新遠程代碼來快速的更新修改我們的應用 ????? [注意]現在很多Android設備以及那個去除了Menu按鍵了，這時候我們可以通過搖晃設備來進行打開菜單,然后完成應用的重新加載，調試以及其他功能。 - Android 5.0以上及更高版本，可以使用adb reverse命令 首先你的設備連接電腦，然后打開USB調試模式。接著命令行運行 adb reverse tcp:8081 tcp:8081 然后我們就可以使用Reload JS和其他的開發選項了。 - Android以下版本可以通過Wifi連接 ①.手機和電腦USB連接并且電腦和手機設備在同一個Wifi網絡環境下 ②.采用react-native run-android運行應用。 ③.現在會發現屏幕是"紅色"，繼續下面的步驟進行解決,截圖如下:  ④.搖晃設備或者命令行輸入adb sell input keyevent 82，打開開發者菜單，如下效果:  ⑤.點擊DevSettings進入，然后選擇Debugserver host& port for device ⑥.輸入電腦的IP地址和端口號(主要查看電腦的IP地址哦,，這邊用我這邊的IP地址和端口，具體要根據實際情況哦)，截圖如下：  ⑦.回到開發者菜單，然后選擇點擊Reload JS。重新加載以下即可。  # (四)應用調試(Debugging)-針對Android應用設備 ??????? 4.1.訪問應用內開發者菜單??????? ??????? Android設備我們可以搖晃或者點擊菜單鍵(不過現在很多手機已經沒有這個模擬按鍵了)。如果你使用的是genymotion模擬器，你可以打開應用，然后發現屏幕右下方有一個箭頭，點擊然后點擊菜單圖標即可。截圖如下:   [注意]如果我們的APP正式發布的話(Release版本)。默認情況下我們采用gradle的assembleRelease來進行構建即可。或者通過代碼ReactInstanceManager的setUseDeveloperSupport方法來進行設置是否開啟調試支持。 ?4.2.應用刷新 ??????? 正常情況下，如果我們只是修改應用的JS代碼的話，那么我們可以直接點擊Reload JS選擇實時刷新即可。但是如果我們修改Android項目中的資源文件(例如res/drawable文件中圖片)或者修改Android的源代碼，那么就需要重新編譯生成應用才可以生效。 ?4.3.Chrome開發調試工具 ?????? 開發的應用進行調試的時候，我們可以使用Chrome來調試js代碼，點擊開發菜單中的Debugin Chrome。然后會打開一個網頁: [http://localhost:8081/debugger-ui](http://localhost:8081/debugger-ui)?? 界面截圖如下:  不過第一次打開需要安裝ReactDevTools(最好翻墻一下)。 安裝方法教程: [http://facebook.github.io/react/blog/2015/09/02/new-react-developer-tools.html](http://facebook.github.io/react/blog/2015/09/02/new-react-developer-tools.html)??????? Chrome添加開發調試插件:  安裝完插件，回退到原來的界面，然后刷新一下即可:  ??????? 如何打開開發者工具: 想必做過Web前端開發的人都知道：Chrome中可以使用option+cammod+i打開或者Chrome選擇菜單-更多工具-開發者工具來進行打開控制臺。不過如果我們的程序出現異常話，可以開啟(Pause On Caught Exceptions)。這樣程序出現異常的時候，程序會暫停執行可以更好的調試錯誤。 真機調試方法: ?????? ①.針對Android 5.0或更高版本的設備，可以通過USB連接，然后使用adb命令建立一個設備到電腦的轉向端口:命令如下: adb reverse tcp:8081 tcp:8081 或者搖晃打開開發者菜單，選擇DevSettings，然后Debug server host for device中設置電腦的IP和端口號。 ?????? ②.針對Android5.0以下的設備，連接方式Wifi，其他步驟差不多哦。 ?4.4..實時刷新JS ??????? 我們可以進行那個如下修改，當我們前端JS代碼發生更改的時候，自動讓設備進行刷新界面。 ???????? 在Android平臺上面，打開開發者菜單，選擇Dev Settings,然后點擊Auto reload on JS change選擇，不過有些版本好像沒有這個更選項了，默認自動刷新的。 # (五)最后總結 ????????? 今天我們主要講解了React Native應用設備運行方式和真機方式，主要材料來自React Native官網，這邊所有步驟我已經全部測試過下的。因為講解起來和實際使用還是回遇到各種問題的。大家有問題可以加一下群React Native技術交流群(282693535)或者底下進行回復一下。 ? ? ? ?尊重原創，轉載請注明：From Sky丶清（[http://blog.csdn.net/developer_jiangqq](http://blog.csdn.net/developer_jiangqq)） 侵權必究！ ? ? ? ?關注我的訂閱號(codedev123),每天分享移動開發技術(Android/IOS),項目管理以及博客文章!(歡迎關注，第一時間推送精彩文章) 關注我的微博，可以獲得更多精彩內容 [](http://weibo.com/u/1855428195?s=6uyXnP) ?