React Native基礎(chǔ)入門(mén)之調(diào)試React Native應(yīng)用的一小步
React Native(以下簡(jiǎn)稱(chēng)RN)為傳統(tǒng)前端開(kāi)發(fā)者打開(kāi)了一扇新的大門(mén)。其中,使用瀏覽器的調(diào)試工具去Debug移動(dòng)端的代碼,無(wú)疑是最吸引開(kāi)發(fā)人員的特性之一。
試想一下,當(dāng)你在手機(jī)屏幕按下一個(gè)按鈕,處理事件的代碼就可以立即在瀏覽器的調(diào)試工具里進(jìn)行斷點(diǎn)調(diào)試,而且每當(dāng)你對(duì)代碼進(jìn)行修改,界面便可以完成快速地重載,省去昂長(zhǎng)的編譯時(shí)間,這會(huì)是多么提高工作效率。
傳統(tǒng)的Web前端開(kāi)發(fā)人員自然很熟悉瀏覽器的調(diào)試工具,但是對(duì)于如何將其在RN中使用以便和移動(dòng)端結(jié)合起來(lái),也許會(huì)相當(dāng)陌生。這也成為了一些開(kāi)發(fā)者跨入RN移動(dòng)開(kāi)發(fā)大門(mén)的第一道小門(mén)檻。
本文是筆者一邊參考官方文檔,一邊摸索RN調(diào)試過(guò)程的記錄。希望能夠幫助新手開(kāi)發(fā)者走出一小步,更快地邁過(guò)這道門(mén)檻。
在開(kāi)始之前,你需要搭建好本地開(kāi)發(fā)環(huán)境,并有一部Android 5.0版本以上的手機(jī)可供連接至電腦。
首先,使用官方工具react-native-cli創(chuàng)建好一個(gè)初始化的工程,并安裝好依賴(lài)。
安裝的命令為“react-native init DebugTest”(DebugTest為我們這次的項(xiàng)目名稱(chēng))
安裝完成后,就會(huì)多出一個(gè)名為DebugTest項(xiàng)目文件夾,文件夾內(nèi)結(jié)構(gòu)如下:
圖1. 項(xiàng)目初始結(jié)構(gòu)
讓我們把項(xiàng)目運(yùn)行起來(lái)。我這里是在Windows下開(kāi)發(fā)Android平臺(tái)的應(yīng)用,并且在此之前,已經(jīng)用USB線連接好了一臺(tái)Android版本7.1.1的真機(jī)。
運(yùn)行項(xiàng)目的方法,就是進(jìn)入DebugTest項(xiàng)目目錄,此時(shí)執(zhí)行命令行react-native run-android。注意,這里啟動(dòng)時(shí)會(huì)新彈出另一個(gè)窗口,用于在8081端口啟動(dòng)一個(gè)叫做Metro Bundler的服務(wù),這個(gè)窗口在開(kāi)發(fā)時(shí)是需要保持運(yùn)行著的。
圖2. Metro Bundler 窗口
同時(shí),可以看到原cmd命令行窗口,顯示在真機(jī)上安裝了apk,并自動(dòng)對(duì)8081端口進(jìn)行了某種映射,使真機(jī)上的應(yīng)用和我們將要調(diào)試的代碼建立了動(dòng)態(tài)的關(guān)聯(lián)。這個(gè)過(guò)程會(huì)比較消耗開(kāi)發(fā)者電腦的系統(tǒng)資源,耐心等待一會(huì)兒就好。
圖3. 原cmd命令行窗口
當(dāng)Metro Bundler窗口顯示index.js的映射進(jìn)度達(dá)到100%時(shí),手機(jī)上就可以看到默認(rèn)的應(yīng)用界面了。
圖4. 默認(rèn)應(yīng)用界面
同時(shí),我們也可以退出應(yīng)用,在手機(jī)的桌面上找到這個(gè)安裝好的應(yīng)用。這里,它的名字就是DebugTest,圖標(biāo)是一個(gè)默認(rèn)的安卓樣子。
我們進(jìn)入這個(gè)應(yīng)用,這時(shí)如果搖一搖手機(jī),會(huì)彈出調(diào)試相關(guān)的設(shè)置:
圖5. 調(diào)試設(shè)置界面
Reload就是重刷整個(gè)應(yīng)用,類(lèi)似于在瀏覽器的F5刷新。
Debug JS Remotely這個(gè)我們先留一個(gè)懸念,待會(huì)再來(lái)看。
先看看Enable Live Reload和Enable Hot Reloading。這兩個(gè)都可以實(shí)現(xiàn)在代碼保存時(shí)自動(dòng)更新界面,它們區(qū)別是:Live Reload會(huì)重刷整個(gè)界面,相當(dāng)于手動(dòng)執(zhí)行一次Reload。而Hot Reloading控制得更精準(zhǔn),它不會(huì)重刷整個(gè)界面,只會(huì)更新修改代碼時(shí)影響的那個(gè)范圍。官方文檔里描述的是:This will allow you to persist the app's state through reloads. 也就是說(shuō),Hot Reloading時(shí)整個(gè)應(yīng)用的狀態(tài)是不會(huì)改變的,頁(yè)面也是不會(huì)整個(gè)重刷的。有趣的是,與Live Reload對(duì)比,Hot Reloading的Reloading這個(gè)正在進(jìn)行時(shí)的語(yǔ)法,也似乎意味著Hot Reloading是當(dāng)程序正在運(yùn)行時(shí)去熱乎乎地替換。
也許是因?yàn)楦鞣N Reloading過(guò)于強(qiáng)大,它有時(shí)會(huì)出一點(diǎn)問(wèn)題,比如在開(kāi)啟Live Reload或者Hot Reloading后,偶爾代碼錯(cuò)誤時(shí)手機(jī)上彈出的紅屏界面在代碼修改好后仍然不能恢復(fù),這種時(shí)候,就需要手動(dòng)Reload界面才能解決。
讓我們只是Enable Live Reload,然后從react-native引入Button,在View里加上一個(gè)按鈕。
圖6. 添加按鈕
這個(gè)時(shí)候,保存代碼。手機(jī)界面確實(shí)立即就變化了!說(shuō)明Live Reload確實(shí)生效了。
不過(guò),不是我們想要的界面,而是出現(xiàn)紅屏錯(cuò)誤提示。
圖7. 紅屏錯(cuò)誤提示
不用怕,遇到問(wèn)題很正常。這時(shí),可以從頭細(xì)心閱讀錯(cuò)誤提示,發(fā)現(xiàn)它指出The title prop of a Button must be a string,并且這個(gè)error is located at: in Button (at App.js:37)。根據(jù)這個(gè)線索,我們看到App.js的第37行,正是剛才添加的Button代碼。
查閱文檔發(fā)現(xiàn),在RN里,Button組件有許多屬性,其中onPress和title這兩個(gè)屬性是required的,也就是必須要有。
圖8. 官方文檔關(guān)于Button的節(jié)選
所以我們修改代碼,
圖9. 補(bǔ)全Button需要的屬性
保存,手機(jī)界面就刷新了,并顯示出剛才添加的Button。
圖10. 正常運(yùn)行
這里還有一小點(diǎn)值得注意,如果只給Button里的title設(shè)了值,而沒(méi)有給onPress設(shè)置,界面不會(huì)出紅色錯(cuò)誤,而是在最下面出現(xiàn)一條黃色警告。仔細(xì)看,會(huì)發(fā)現(xiàn)其實(shí)這兩個(gè)屬性的Type不一樣。由此可知,當(dāng)需要的類(lèi)型是string而實(shí)際是undefined時(shí),會(huì)報(bào)error,而需要的類(lèi)型是function而實(shí)際是undefined時(shí),只會(huì)報(bào)warnning。
同時(shí)可以看到,在上面的代碼中,當(dāng)按鈕按下時(shí),會(huì)調(diào)用一個(gè)打log的事件。但是打出的log在哪兒可以看到呢?
有兩種方法。 第一種是在命令行顯示,在項(xiàng)目當(dāng)前目錄(注意,一定要在項(xiàng)目當(dāng)前目錄)再啟動(dòng)一個(gè)新命令行窗口,輸入
就可以在最下面看到輸出的內(nèi)容了,它不僅可以實(shí)時(shí)反饋現(xiàn)有的輸入,還保存了之前的輸入。比如,下面三次輸入,前兩次輸入是在之前還沒(méi)有開(kāi)啟這個(gè)命令行窗口時(shí)按下的。
也許你會(huì)想:我不是想在命令窗口看到輸出,而是想能夠在瀏覽器里那樣看到輸出,甚至斷點(diǎn)調(diào)試。這就是查看log的第二種方法。
回到本文的初衷。讓我們回頭再看看調(diào)試設(shè)置界面中的Debug JS Remotely選項(xiàng),現(xiàn)在點(diǎn)擊它。這時(shí)會(huì)彈出Chrome的一個(gè)標(biāo)簽(當(dāng)然,本地需要預(yù)先安裝有Chrome)。
圖11. 打開(kāi)Remote JS Debugging后彈出的瀏覽器標(biāo)簽
注意:這里的Status:Debugger session #0 active就表示程序與該頁(yè)面成功建立連接了。
這個(gè)時(shí)候在瀏覽器開(kāi)發(fā)者工具的調(diào)試窗口,也能看到打出的log。而且它還可以更進(jìn)一步地進(jìn)行斷點(diǎn)調(diào)試。
為更好地嘗試調(diào)試功能,我們修改一下代碼,添加一個(gè)sayHello方法輸出log。
圖12. 重新綁定onPress事件
保存,和預(yù)想的一樣,頁(yè)面刷新了,因?yàn)長(zhǎng)ive Reload。
如同調(diào)試Web前端代碼一樣,我們打開(kāi)瀏覽器的開(kāi)發(fā)者工具,找到代碼文件,并在sayHello函數(shù)里打一個(gè)斷點(diǎn)。這個(gè)時(shí)候,按下手機(jī)上的Test按鈕,可以看到程序執(zhí)行到斷點(diǎn)停下了,這與調(diào)試網(wǎng)頁(yè)代碼是多么相似:
圖13. 瀏覽器上的斷點(diǎn)調(diào)試
不過(guò),與調(diào)試純網(wǎng)頁(yè)代碼有兩點(diǎn)不同。
第一,瀏覽器的頁(yè)面上看不到應(yīng)用界面,只能在手機(jī)上看到界面。
第二,手機(jī)上的界面在程序被斷住的情況下,仍然可以接收事件。舉個(gè)例子,就在此時(shí),手機(jī)上該應(yīng)用的界面表面上沒(méi)什么反應(yīng),但是,如果你再多次按下Test按鈕,事件都會(huì)被記住,到時(shí)候會(huì)挨個(gè)響應(yīng)。只是現(xiàn)在程序斷在了第一次按下按鈕的時(shí)候。
我們讓程序繼續(xù)(如果在斷點(diǎn)期間多次按下按鈕,會(huì)有多次被斷?。?/p>
圖14. 瀏覽器控制臺(tái)輸出
我們按下了6次,調(diào)試工具下也顯示出6次輸出。這是與調(diào)試網(wǎng)頁(yè)時(shí)的不同:當(dāng)調(diào)試網(wǎng)頁(yè)時(shí),一旦執(zhí)行到斷點(diǎn),瀏覽器的頁(yè)面其實(shí)就不可點(diǎn)擊了。
到這一步,是不是覺(jué)得使用RN開(kāi)發(fā)也沒(méi)有那么難呢?
至于Toggle Inspector, Show Perf Monitor, Start/Stop Sampling Profiler和Dev Settings,我們暫時(shí)可以不用管它們。
目前已經(jīng)知道了調(diào)試設(shè)置中Remote JS Debugging, Live Reload和 Hot Reloading。相信我們已經(jīng)可以比較從容地Debug簡(jiǎn)單的 RN應(yīng)用了。這里以Windows下的Android為例,其實(shí)在Mac下開(kāi)發(fā)iOS也是相似的。
總結(jié)
希望本文的分享對(duì)嘗試RN的新手朋友有所幫助。如果大家對(duì)下篇想講的內(nèi)容有自己的想法,請(qǐng)留言告訴我,我們一定會(huì)認(rèn)真考慮。
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,如果有疑問(wèn)大家也可以留言交流,謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
React 添加引用路徑時(shí)如何使用@符號(hào)作為src文件
這篇文章主要介紹了React 添加引用路徑時(shí)如何使用@符號(hào)作為src文件,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-06-06React+Spring實(shí)現(xiàn)跨域問(wèn)題的完美解決方法
這篇文章主要介紹了React+Spring實(shí)現(xiàn)跨域問(wèn)題的完美解決方法,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-08-08react 權(quán)限樹(shù)形結(jié)構(gòu)實(shí)現(xiàn)代碼
這篇文章主要介紹了react 權(quán)限樹(shù)形結(jié)構(gòu)實(shí)現(xiàn)代碼,項(xiàng)目背景react + ant design,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2024-05-05React+Antd 實(shí)現(xiàn)可增刪改表格的示例
這篇文章主要介紹了React+Antd實(shí)現(xiàn)可增刪改表格的示例,幫助大家更好的理解和學(xué)習(xí)使用React,感興趣的朋友可以了解下2021-04-04Vite?+?React從零開(kāi)始搭建一個(gè)開(kāi)源組件庫(kù)
這篇文章主要介紹了Vite?+?React?如何從0到1搭建一個(gè)開(kāi)源組件庫(kù),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-06-06