React Native 腳手架的基本使用詳解
構(gòu)建項目
在相應(yīng)的路徑下執(zhí)行命令行：react-native init 項目名 (名稱不可使用連接符等特殊字符,命名可以參考APP應(yīng)用名稱 比如 FaceBook)
react-native --v //查看版本 react-native init demo --version 0.48.0//安裝指定的版本 react-native init demo --verbose --version 0.48.0 //verbose是初始化的時候顯示安裝詳情的，安裝什么模塊以及進度 npm view react-native versions //可以查看react-native所有的版本信息
跳轉(zhuǎn)到對應(yīng)路徑下執(zhí)行相應(yīng)的移動端項目：
cd 項目名 react-native run-ios or react-native run-android
如果正常，運行效果如下：
RN調(diào)試技巧
Developer Menu
Developer Menu是React Native給開發(fā)者定制的一個開發(fā)者菜單，來幫助開發(fā)者調(diào)試React Native應(yīng)用。
在模擬器上開啟Developer Menu Android模擬器：
可以通過Command⌘ + M快捷鍵來快速打開Developer Menu。也可以通過模擬器上的菜單鍵來打開。
iOS模擬器：
可以通過Command⌘ + D快捷鍵來快速打開Developer Menu。
Reload
刷新頁面，其快捷鍵是 command + R。
注意：只有修改 JavaScript 文件時，刷新功能才起作用。如果新增了文件或者修改了 Native 代碼，就需要使用 Xcode 重新編譯應(yīng)用了。
Debug JS Remotely
該功能允許開發(fā)人員在 Chrome 中調(diào)試應(yīng)用，其調(diào)試方式和調(diào)試 Web 應(yīng)用一樣。
change bundle location
改變打包后的地址
toggle inspector
在模擬器中查看組件樣式。不怎么好用。
disable fast refresh
禁止快速刷新
Show Perf Monitor
該功能啟用后會顯示一個監(jiān)控窗口，顯示出實時的內(nèi)存占用、UI 和 JavaScript 的 FPS 等信息。幫助我們調(diào)試性能問題。
Errors and Warnings
在development模式下，js部分的Errors 和 Warnings會直接打印在手機或模擬器屏幕上，以紅屏和黃屏展示。。
Errors
React Native程序運行時出現(xiàn)的Errors會被直接顯示在屏幕上，以紅色的背景顯示，并會打印出錯誤信息。 你也可以通過console.error()來手動觸發(fā)Errors。
Warnings
React Native程序運行時出現(xiàn)的Warnings也會被直接顯示在屏幕上，以黃色的背景顯示，并會打印出警告信息。 你也可以通過console.warn()來手動觸發(fā)Warnings。 你也可以通過console.disableYellowBox = true來手動禁用Warnings的顯示，或者通過console.ignoredYellowBox = ['Warning: ...'];來忽略相應(yīng)的Warning
Chrome Developer Tools
第一步：啟動遠程調(diào)試
在Developer Menu下單擊”Debug JS Remotely” 啟動JS遠程調(diào)試功能。此時Chrome會被打開，同時會創(chuàng)建一個“http://localhost:8081/debugger-ui.” Tab頁。
第二步：打開Chrome開發(fā)者工具
在該“http://localhost:8081/debugger-ui.”Tab頁下打開開發(fā)者工具。打開Chrome菜單->選擇更多工具->選擇開發(fā)者工具。你也可以通過快捷鍵(Command⌘ + Option⌥ + I on Mac, Ctrl + Shift + I on Windows)打開開發(fā)者工具。
斷點調(diào)試 當發(fā)生一些"莫名奇妙"的問題錯誤,常用解決方案
這里的莫名其妙是指，在上一刻代碼還可以正常運行，在沒有修改的情況下爆紅：
1.刷新 ！ 刷新！ 刷新！
2.重新使用react-native run-xxx命令啟動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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了react路由動畫跳轉(zhuǎn)功能,大概思路是下載第三方庫?引用,創(chuàng)建css文件引用,想要實現(xiàn)跳轉(zhuǎn)動畫功能,就在那個組件的根節(jié)點綁定classname屬性即可,在跳轉(zhuǎn)的時候即可實現(xiàn),需要的朋友可以參考下2023-10-10
React immer與Redux Toolkit使用教程詳解
這篇文章主要介紹了React中immer與Redux Toolkit的使用，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-10-10
這篇文章主要介紹了在React中this容易遇到的問題總結(jié)，文中有詳細的示例代碼，希望對大家有一定的幫助,需要的朋友可以參考下2023-05-05
在React中使用IndexedDB進行前端離線存儲,可以存儲大量數(shù)據(jù),支持復(fù)雜的數(shù)據(jù)類型和高性能查詢,通過示例展示了如何創(chuàng)建數(shù)據(jù)庫、添加數(shù)據(jù)、查詢數(shù)據(jù)和構(gòu)建一個簡單的待辦事項應(yīng)用,感興趣的朋友跟隨小編一起看看吧2024-11-11
react antd如何防止一份數(shù)據(jù)多次提交
這篇文章主要介紹了react antd如何防止一份數(shù)據(jù)多次提交問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
react中使用js實現(xiàn)頁面滾動監(jiān)聽(推薦)
這篇文章主要介紹了react中使用js實現(xiàn)頁面滾動監(jiān)聽,本文通過實例代碼給大家介紹的非常詳細,需要的朋友可以參考下2024-04-04
從零開始最小實現(xiàn)react服務(wù)器渲染詳解
這篇文章主要介紹了從零開始最小實現(xiàn)react服務(wù)器渲染詳解,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
react+zarm實現(xiàn)底部導(dǎo)航欄的示例代碼
本文主要介紹了react?+?zarm?實現(xiàn)底部導(dǎo)航欄的示例代碼，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
教你快速搭建 React Native 開發(fā)環(huán)境
這篇文章主要介紹了搭建 React Native 開發(fā)環(huán)境的詳細過程,本文通過圖文指令給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08
簡析React Native startReactApplication 方法
這篇文章主要介紹了React Native startReactApplication 方法簡析,本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-09-09