React Native 腳手架的基本使用詳解
構(gòu)建項(xiàng)目
在相應(yīng)的路徑下執(zhí)行命令行：react-native init 項(xiàng)目名 (名稱(chēng)不可使用連接符等特殊字符,命名可以參考APP應(yīng)用名稱(chēng) 比如 FaceBook)
react-native --v //查看版本 react-native init demo --version 0.48.0//安裝指定的版本 react-native init demo --verbose --version 0.48.0 //verbose是初始化的時(shí)候顯示安裝詳情的，安裝什么模塊以及進(jìn)度 npm view react-native versions //可以查看react-native所有的版本信息
跳轉(zhuǎn)到對(duì)應(yīng)路徑下執(zhí)行相應(yīng)的移動(dòng)端項(xiàng)目：
cd 項(xiàng)目名 react-native run-ios or react-native run-android
如果正常，運(yùn)行效果如下：
RN調(diào)試技巧
Developer Menu
Developer Menu是React Native給開(kāi)發(fā)者定制的一個(gè)開(kāi)發(fā)者菜單，來(lái)幫助開(kāi)發(fā)者調(diào)試React Native應(yīng)用。
在模擬器上開(kāi)啟Developer Menu Android模擬器：
可以通過(guò)Command⌘ + M快捷鍵來(lái)快速打開(kāi)Developer Menu。也可以通過(guò)模擬器上的菜單鍵來(lái)打開(kāi)。
iOS模擬器：
可以通過(guò)Command⌘ + D快捷鍵來(lái)快速打開(kāi)Developer Menu。
Reload
刷新頁(yè)面，其快捷鍵是 command + R。
注意：只有修改 JavaScript 文件時(shí)，刷新功能才起作用。如果新增了文件或者修改了 Native 代碼，就需要使用 Xcode 重新編譯應(yīng)用了。
Debug JS Remotely
該功能允許開(kāi)發(fā)人員在 Chrome 中調(diào)試應(yīng)用，其調(diào)試方式和調(diào)試 Web 應(yīng)用一樣。
change bundle location
改變打包后的地址
toggle inspector
在模擬器中查看組件樣式。不怎么好用。
disable fast refresh
禁止快速刷新
Show Perf Monitor
該功能啟用后會(huì)顯示一個(gè)監(jiān)控窗口，顯示出實(shí)時(shí)的內(nèi)存占用、UI 和 JavaScript 的 FPS 等信息。幫助我們調(diào)試性能問(wèn)題。
Errors and Warnings
在development模式下，js部分的Errors 和 Warnings會(huì)直接打印在手機(jī)或模擬器屏幕上，以紅屏和黃屏展示。。
Errors
React Native程序運(yùn)行時(shí)出現(xiàn)的Errors會(huì)被直接顯示在屏幕上，以紅色的背景顯示，并會(huì)打印出錯(cuò)誤信息。 你也可以通過(guò)console.error()來(lái)手動(dòng)觸發(fā)Errors。
Warnings
React Native程序運(yùn)行時(shí)出現(xiàn)的Warnings也會(huì)被直接顯示在屏幕上，以黃色的背景顯示，并會(huì)打印出警告信息。 你也可以通過(guò)console.warn()來(lái)手動(dòng)觸發(fā)Warnings。 你也可以通過(guò)console.disableYellowBox = true來(lái)手動(dòng)禁用Warnings的顯示，或者通過(guò)console.ignoredYellowBox = ['Warning: ...'];來(lái)忽略相應(yīng)的Warning
Chrome Developer Tools
第一步：?jiǎn)?dòng)遠(yuǎn)程調(diào)試
在Developer Menu下單擊”Debug JS Remotely” 啟動(dòng)JS遠(yuǎn)程調(diào)試功能。此時(shí)Chrome會(huì)被打開(kāi)，同時(shí)會(huì)創(chuàng)建一個(gè)“http://localhost:8081/debugger-ui.” Tab頁(yè)。
第二步：打開(kāi)Chrome開(kāi)發(fā)者工具
在該“http://localhost:8081/debugger-ui.”Tab頁(yè)下打開(kāi)開(kāi)發(fā)者工具。打開(kāi)Chrome菜單->選擇更多工具->選擇開(kāi)發(fā)者工具。你也可以通過(guò)快捷鍵(Command⌘ + Option⌥ + I on Mac, Ctrl + Shift + I on Windows)打開(kāi)開(kāi)發(fā)者工具。
斷點(diǎn)調(diào)試 當(dāng)發(fā)生一些"莫名奇妙"的問(wèn)題錯(cuò)誤,常用解決方案
這里的莫名其妙是指，在上一刻代碼還可以正常運(yùn)行，在沒(méi)有修改的情況下爆紅：
1.刷新 ！ 刷新！ 刷新！
2.重新使用react-native run-xxx命令啟動(dòng)App
3.刪掉App程序，關(guān)掉本地服務(wù)器，清除本地緩存
yarn:清空緩存 yarn cache clean npm:清空緩存 npm cache clean -f
到此這篇關(guān)于React Native 腳手架的基本使用的文章就介紹到這了,更多相關(guān)React Native 腳手架內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了redux工作原理講解及使用方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2021-11-11
使用react-color實(shí)現(xiàn)前端取色器的方法
本文通過(guò)代碼給大家介紹了使用react-color實(shí)現(xiàn)前端取色器的方法，代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2021-11-11
這篇文章主要為大家介紹了React可定制黑暗模式切換開(kāi)關(guān)組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
這篇文章主要為大家介紹了如何在Remix中使用tailwindcss方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
這篇文章主要為大家詳細(xì)介紹了react中的axios模塊，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-03-03
這篇文章主要給大家介紹了關(guān)于React Native自定義組件與輸出方法的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07
React中memo useCallback useMemo方法作用及使用場(chǎng)景
這篇文章主要為大家介紹了React中三個(gè)hooks方法memo useCallback useMemo的作用及使用場(chǎng)景示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助2023-03-03
這篇文章主要介紹了React中事件的類(lèi)型定義方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
React將組件（component）看成一個(gè)狀態(tài)機(jī)（State Machines），通過(guò)其內(nèi)部自定義的狀態(tài)（State）和生命周期（Lifecycle）實(shí)現(xiàn)并與用戶(hù)交互，維持組件的不同狀態(tài)2022-09-09
React項(xiàng)目動(dòng)態(tài)設(shè)置title標(biāo)題的方法示例
這篇文章主要介紹了React項(xiàng)目動(dòng)態(tài)設(shè)置title標(biāo)題的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09