React Native基礎&入門教程：調試React Native應用的一小步

React Native(如下簡稱RN)爲傳統前端開發者打開了一扇新的大門。其中，使用瀏覽器的調試工具去Debug移動端的代碼，無疑是最吸引開發人員的特性之一。

試想一下，當你在手機屏幕按下一個按鈕，處理事件的代碼就能夠當即在瀏覽器的調試工具裏進行斷點調試，並且每當你對代碼進行修改，界面即可以完成快速地重載，省去昂長的編譯時間，這會是多麼提升工做效率。

傳統的Web前端開發人員天然很熟悉瀏覽器的調試工具，可是對於如何將其在RN中使用以便和移動端結合起來，也許會至關陌生。這也成爲了一些開發者跨入RN移動開發大門的第一道小門檻。

本文是筆者一邊參考官方文檔，一邊摸索RN調試過程的記錄。但願可以幫助新手開發者走出一小步，更快地邁過這道門檻。

在開始以前，你須要搭建好本地開發環境，並有一部Android 5.0版本以上的手機可供鏈接至電腦。

首先，使用官方工具react-native-cli建立好一個初始化的工程，並安裝好依賴。

安裝的命令爲「react-native init DebugTest」（DebugTest爲咱們此次的項目名稱）

安裝完成後，就會多出一個名爲DebugTest項目文件夾，文件夾內結構以下：

讓咱們把項目運行起來。我這裏是在Windows下開發Android平臺的應用，而且在此以前，已經用USB線鏈接好了一臺Android版本7.1.1的真機。

運行項目的方法，就是進入DebugTest項目目錄，此時執行命令行react-native run-android。注意，這裏啓動時會新彈出另外一個窗口，用於在8081端口啓動一個叫作Metro Bundler的服務，這個窗口在開發時是須要保持運行着的。

同時，能夠看到原cmd命令行窗口，顯示在真機上安裝了apk，並自動對8081端口進行了某種映射，使真機上的應用和咱們將要調試的代碼創建了動態的關聯。這個過程會比較消耗開發者電腦的系統資源，耐心等待一下子就好。

當Metro Bundler窗口顯示index.js的映射進度達到100%時，手機上就能夠看到默認的應用界面了。

同時，咱們也能夠退出應用，在手機的桌面上找到這個安裝好的應用。這裏，它的名字就是DebugTest，圖標是一個默認的安卓樣子。

咱們進入這個應用，這時若是搖一搖手機，會彈出調試相關的設置：

Reload就是重刷整個應用，相似於在瀏覽器的F5刷新。

Debug JS Remotely這個咱們先留一個懸念，待會再來看。

先看看Enable Live Reload和Enable Hot Reloading。這兩個均可以實如今代碼保存時自動更新界面，它們區別是：Live Reload會重刷整個界面，至關於手動執行一次Reload。而Hot Reloading控制得更精準，它不會重刷整個界面，只會更新修改代碼時影響的那個範圍。官方文檔裏描述的是：This will allow you to persist the app's state through reloads. 也就是說，Hot Reloading時整個應用的狀態是不會改變的，頁面也是不會整個重刷的。有趣的是，與Live Reload對比，Hot Reloading的Reloading這個正在進行時的語法，也彷佛意味着Hot Reloading是當程序正在運行時去熱乎乎地替換。

也許是由於各類 Reloading過於強大，它有時會出一點問題，好比在開啓Live Reload或者Hot Reloading後，偶爾代碼錯誤時手機上彈出的紅屏界面在代碼修改好後仍然不能恢復，這種時候，就須要手動Reload界面才能解決。

讓咱們只是Enable Live Reload，而後從react-native引入Button，在View里加上一個按鈕。

這個時候，保存代碼。手機界面確實當即就變化了！說明Live Reload確實生效了。

不過，不是咱們想要的界面，而是出現紅屏錯誤提示。

不用怕，遇到問題很正常。這時，能夠從頭細心閱讀錯誤提示，發現它指出The title prop of a Button must be a string，而且這個error is located at: in Button (at App.js:37)。根據這個線索，咱們看到App.js的第37行，正是剛纔添加的Button代碼。

查閱文檔發現，在RN裏，Button組件有許多屬性，其中onPress和title這兩個屬性是required的，也就是必需要有。

因此咱們修改代碼，

保存，手機界面就刷新了，並顯示出剛纔添加的Button。

這裏還有一小點值得注意，若是隻給Button裏的title設了值，而沒有給onPress設置，界面不會出紅色錯誤，而是在最下面出現一條黃色警告。仔細看，會發現其實這兩個屬性的Type不同。由此可知，當須要的類型是string而實際是undefined時，會報error，而須要的類型是function而實際是undefined時，只會報warnning。

同時能夠看到，在上面的代碼中，當按鈕按下時，會調用一個打log的事件。可是打出的log在哪兒能夠看到呢？

有兩種方法。 第一種是在命令行顯示，在項目當前目錄（注意，必定要在項目當前目錄）再啓動一個新命令行窗口，輸入

就能夠在最下面看到輸出的內容了，它不只能夠實時反饋現有的輸入，還保存了以前的輸入。好比，下面三次輸入，前兩次輸入是在以前尚未開啓這個命令行窗口時按下的。

也許你會想：我不是想在命令窗口看到輸出，而是想可以在瀏覽器裏那樣看到輸出，甚至斷點調試。這就是查看log的第二種方法。

回到本文的初衷。讓咱們回頭再看看調試設置界面中的Debug JS Remotely選項，如今點擊它。這時會彈出Chrome的一個標籤（固然，本地須要預先安裝有Chrome）。

注意這裏的Status：Debugger session #0 active就表示程序與該頁面成功創建鏈接了。

這個時候在瀏覽器開發者工具的調試窗口，也能看到打出的log。並且它還能夠更進一步地進行斷點調試。

爲更好地嘗試調試功能，咱們修改一下代碼，添加一個sayHello方法輸出log。

保存，和預想的同樣，頁面刷新了，由於Live Reload。

如同調試Web前端代碼同樣，咱們打開瀏覽器的開發者工具，找到代碼文件，並在sayHello函數裏打一個斷點。這個時候，按下手機上的Test按鈕，能夠看到程序執行到斷點停下了，這與調試網頁代碼是多麼類似：

不過，與調試純網頁代碼有兩點不一樣。

第一，瀏覽器的頁面上看不到應用界面，只能在手機上看到界面。

第二，手機上的界面在程序被斷住的狀況下，仍然能夠接收事件。舉個例子，就在此時，手機上該應用的界面表面上沒什麼反應，可是，若是你再屢次按下Test按鈕，事件都會被記住，到時候會挨個響應。只是如今程序斷在了第一次按下按鈕的時候。

咱們讓程序繼續（若是在斷點期間屢次按下按鈕，會有屢次被斷住）。

咱們按下了6次，調試工具下也顯示出6次輸出。這是與調試網頁時的不一樣：當調試網頁時，一旦執行到斷點，瀏覽器的頁面其實就不可點擊了。

到這一步，是否是以爲使用RN開發也沒有那麼難呢？

至於Toggle Inspector, Show Perf Monitor, Start/Stop Sampling Profiler和Dev Settings，咱們暫時能夠不用管它們。

目前已經知道了調試設置中Remote JS Debugging, Live Reload和 Hot Reloading。相信咱們已經能夠比較從容地Debug簡單的 RN應用了。這裏以Windows下的Android爲例，其實在Mac下開發iOS也是類似的。

但願本文的分享對嘗試RN的新手朋友有所幫助。若是你們對下篇想講的內容有本身的想法，請留言告訴我，咱們必定會認真考慮。

移動端應用開發利器：

SpreadJS純前端表格控件、WijmoJS純前端控件集爲您的移動應用帶來更加靈活的操做體驗和更佳美觀的外觀風格，歡迎下載。

擴展閱讀：

純乾貨分享：如何在 React 框架中使用SpreadJS