目錄(?)[+]

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

(一)前言       

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

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

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

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

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

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

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

      2.3.最后我們通過(guò)IDE引入該項(xiàng)目(Atom或者WebStorm)，進(jìn)行編寫(xiě)代碼即可。

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

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

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

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

[java] view plaincopy

1. react-native run-android  

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

[注意]

在真機(jī)上運(yùn)行時(shí)可能會(huì)遇到白屏的情況，請(qǐng)找到并開(kāi)啟懸浮窗權(quán)限。比如小米系統(tǒng)設(shè)置(點(diǎn)擊設(shè)置)

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

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

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

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

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

adb reverse tcp:8081 tcp:8080

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

• Android 以下版本可以通過(guò)Wifi連接

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

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

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

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

⑤.點(diǎn)擊Dev Settings進(jìn)入，然后選擇Debug server host& port for device

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

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

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

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

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

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

 4.2.應(yīng)用刷新

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

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

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

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

安裝方法教程:

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

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

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

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

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

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

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

adb reverse tcp:8081 tcp:8081

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

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

 4.4..實(shí)時(shí)刷新JS

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

         在Android平臺(tái)上面，打開(kāi)開(kāi)發(fā)者菜單，選擇Dev Settings,然后點(diǎn)擊Auto reload on JS change選擇，不過(guò)有些版本好像沒(méi)有這個(gè)更選項(xiàng)了，默認(rèn)自動(dòng)刷新的。

(五)最后總結(jié)

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