目錄(?)[+]

本文出自:【江清清的博客】

(一)前言       

        【好消息】個人網(wǎng)站已經(jīng)上線運行,后面博客以及技術(shù)干貨等精彩文章會同步更新，請大家關(guān)注收藏:http://www.

       前面的課程我們已經(jīng)對React Native的環(huán)境搭建以及開發(fā)的IDE做了相關(guān)的講解，今天我們的主要講解的是應(yīng)用設(shè)備運行(Running)以及調(diào)試方法(Debugging)。本節(jié)的前提條件就是大家已經(jīng)搭建了React Native的相關(guān)環(huán)境。如果沒有請關(guān)注第一講(點擊進入)。

         剛創(chuàng)建的React Native技術(shù)交流群(282693535),歡迎各位大牛,React Native技術(shù)愛好者加入交流!同時博客左側(cè)歡迎微信掃描關(guān)注訂閱號,移動技術(shù)干貨,精彩文章技術(shù)推送!

(二)創(chuàng)建React Native項目  

        需要運行和調(diào)試應(yīng)用，首先我們需要使用react-native init xxproject來創(chuàng)建一個項目，這個步驟雖然在之前我們已經(jīng)講過了，不過這邊在演示一下。

        2.1.命令行運行:react-native init TestOne   [注].該命令創(chuàng)建項目時間有時候會比較耗時，一般幾分鐘吧，請耐心等待!運行日志截圖如下:

       2.2.在相應(yīng)目錄生成項目，項目的目錄機構(gòu)如下:

      2.3.最后我們通過IDE引入該項目(Atom或者WebStorm)，進行編寫代碼即可。

(三)應(yīng)用設(shè)備運行(Running)

         [注意].如果你需要應(yīng)用運行在真機設(shè)備中，那么我們首先設(shè)備要開啟USB調(diào)試模式。具體真機怎么樣打開USB調(diào)試模式，請百度哈(點擊打開USB調(diào)試模式)

         真機打開USB調(diào)試模式之后，然后連接電腦，命令行adb devices可以查看當(dāng)前的設(shè)備列表信息，不過我現(xiàn)在電腦沒有連接真機，所有只有會顯示模擬器信息了。      

現(xiàn)在大家可以看到里邊有一臺設(shè)備已經(jīng)連接了，不過如果我們需要運行應(yīng)用的話，那我們必須確保當(dāng)前只有一臺設(shè)備已經(jīng)連接即可了。接下來我們命令行運行以下命令:

[java] view plaincopy

1. react-native run-android  

接著就是開始編譯代碼，然后運行程序到設(shè)備中了。

[注意]

在真機上運行時可能會遇到白屏的情況，請找到并開啟懸浮窗權(quán)限。比如小米系統(tǒng)設(shè)置(點擊設(shè)置)

        3.1.從設(shè)備上面訪問實時服務(wù)器數(shù)據(jù)(這邊服務(wù)器指本地代碼)

當(dāng)我們啟動開發(fā)服務(wù)的情況下，我們可以通過以下兩種方法來更新遠程代碼來快速的更新修改我們的應(yīng)用

      [注意]現(xiàn)在很多Android設(shè)備以及那個去除了Menu按鍵了，這時候我們可以通過搖晃設(shè)備來進行打開菜單,然后完成應(yīng)用的重新加載，調(diào)試以及其他功能。

• Android 5.0以上及更高版本，可以使用adb reverse命令

首先你的設(shè)備連接電腦，然后打開USB調(diào)試模式。接著命令行運行

adb reverse tcp:8081 tcp:8080

然后我們就可以使用Reload JS和其他的開發(fā)選項了。

• Android 以下版本可以通過Wifi連接

①.手機和電腦USB連接并且電腦和手機設(shè)備在同一個Wifi網(wǎng)絡(luò)環(huán)境下

②.采用react-native run-android運行應(yīng)用。

③.現(xiàn)在會發(fā)現(xiàn)屏幕是"紅色"，繼續(xù)下面的步驟進行解決,截圖如下:

④.搖晃設(shè)備或者命令行輸入adb sell input keyevent 82，打開開發(fā)者菜單，如下效果:

⑤.點擊Dev Settings進入，然后選擇Debug server host& port for device

⑥.輸入電腦的IP地址和端口號(主要查看電腦的IP地址哦,，這邊用我這邊的IP地址和端口，具體要根據(jù)實際情況哦)，截圖如下：

⑦.回到開發(fā)者菜單，然后選擇點擊Reload JS。重新加載以下即可。

(四)應(yīng)用調(diào)試(Debugging)-針對Android應(yīng)用設(shè)備

        4.1.訪問應(yīng)用內(nèi)開發(fā)者菜單       

        Android設(shè)備我們可以搖晃或者點擊菜單鍵(不過現(xiàn)在很多手機已經(jīng)沒有這個模擬按鍵了)。如果你使用的是genymotion模擬器，你可以打開應(yīng)用，然后發(fā)現(xiàn)屏幕右下方有一個箭頭，點擊然后點擊菜單圖標(biāo)即可。截圖如下:

[注意]如果我們的APP正式發(fā)布的話(Release版本)。默認情況下我們采用gradle的assembleRelease來進行構(gòu)建即可?；蛘咄ㄟ^代碼ReactInstanceManager的setUseDeveloperSupport方法來進行設(shè)置是否開啟調(diào)試支持。

 4.2.應(yīng)用刷新

        正常情況下，如果我們只是修改應(yīng)用的JS代碼的話，那么我們可以直接點擊Reload JS選擇實時刷新即可。但是如果我們修改Android項目中的資源文件(例如res/drawable文件中圖片)或者修改Android的源代碼，那么就需要重新編譯生成應(yīng)用才可以生效。

 4.3.Chrome開發(fā)調(diào)試工具

       開發(fā)的應(yīng)用進行調(diào)試的時候，我們可以使用Chrome來調(diào)試js代碼，點擊開發(fā)菜單中的Debugin Chrome。然后會打開一個網(wǎng)頁: http://localhost:8081/debugger-ui   界面截圖如下:

不過第一次打開需要安裝ReactDevTools(最好翻墻一下)。

安裝方法教程:

http://facebook./react/blog/2015/09/02/new-react-developer-tools.html       

Chrome添加開發(fā)調(diào)試插件:

安裝完插件，回退到原來的界面，然后刷新一下即可:

        如何打開開發(fā)者工具:

想必做過Web前端開發(fā)的人都知道：Chrome中可以使用option+cammod+i打開或者Chrome選擇菜單-更多工具-開發(fā)者工具來進行打開控制臺。不過如果我們的程序出現(xiàn)異常話，可以開啟(Pause On Caught Exceptions)。這樣程序出現(xiàn)異常的時候，程序會暫停執(zhí)行可以更好的調(diào)試錯誤。

真機調(diào)試方法:

       ①.針對Android 5.0或更高版本的設(shè)備，可以通過USB連接，然后使用adb命令建立一個設(shè)備到電腦的轉(zhuǎn)向端口:命令如下:

adb reverse tcp:8081 tcp:8081

或者搖晃打開開發(fā)者菜單，選擇DevSettings，然后Debug server host for device中設(shè)置電腦的IP和端口號。

       ②.針對Android5.0以下的設(shè)備，連接方式Wifi，其他步驟差不多哦。

 4.4..實時刷新JS

        我們可以進行那個如下修改，當(dāng)我們前端JS代碼發(fā)生更改的時候，自動讓設(shè)備進行刷新界面。

         在Android平臺上面，打開開發(fā)者菜單，選擇Dev Settings,然后點擊Auto reload on JS change選擇，不過有些版本好像沒有這個更選項了，默認自動刷新的。

(五)最后總結(jié)

          今天我們主要講解了React Native應(yīng)用設(shè)備運行方式和真機方式，主要材料來自React Native官網(wǎng)，這邊所有步驟我已經(jīng)全部測試過下的。因為講解起來和實際使用還是回遇到各種問題的。大家有問題可以加一下群React Native技術(shù)交流群(282693535)或者底下進行回復(fù)一下。