構建專案

在相應的路徑下執行命令列：react-native init 專案名 (名稱不可使用連線符等特殊字元,命名可以參考APP應用名稱 比如 FaceBook)

react-native --v //檢視版本
react-native init demo --version 0.48.0//安裝指定的版本http://www.cppcns.com
react-native init demo --verbose --version 0.48.0 //verbose是初始化的時候顯示安裝詳情的，安裝什麼模組以及進度
npm view react-native versions //可以檢視react-native所有的版本資訊

跳轉到對應路徑下執行相應的移動端專案：

cd 專案名 
react-native run-ios or react-native run-android

如果正常，執行效果如下：

RN除錯技巧

Developer Menu

Developer Menu是React Nat程式設計客棧ive給開發者定製的一個開發者選單，來幫助開發者除錯React Native應用。

在模擬器上開啟Developwww.cppcns.comer Menu Android模擬器：

可以通過Command⌘ + M快捷鍵來快速開啟Developer Menu。也可以通過模擬器上的選單鍵來開啟。

iOS模擬器：

可以通過Command⌘ + D快捷鍵來快速開啟Developer Menu。

Reload

重新整理頁面，其快捷鍵是 command + R。

注意：只有修改 javaSwww.cppcns.comcript 檔案時，重新整理功能才起作用。如果新增了檔案或者修改了 Native 程式碼，就需要使用 Xcode 重新編譯應用了。

Debug js Remotely

該功能允許開發人員在 Chrome 中除錯應用，其除錯方式和除錯 Web 應用一樣。

change bundle location

改變打包後的地址

toggle inspector

在模擬器中檢視元件樣式。不怎麼好用。

disable fast refresh

禁止快速重新整理

Show Perf Monitor

該功能啟用後會顯示一個監控視窗，顯示出實時的記憶體佔用、UI 和 javascript 的 FPS 等資訊。幫助我們除錯效能問題。

Errors and Warnings

在development模式下，js部分的Errors 和 Warnings會直接列印在手機或模擬器螢幕上，以紅屏和黃屏展示。。

Errors

React Native程式執行時出現的Errors會被直接顯示在螢幕上，以紅色的背景顯示，並會打印出錯誤資訊。 你也可以通過console.error()來手動觸發Errors。

Warnings

React Native程式執行時出現的Warnings也會被直接顯示在螢幕上，以黃色的背景顯示，並會打印出警告資訊。 你也可以通過console.warn()來手動觸發Warnings。 你也可以通過console.disableYellowBox = true來手動禁用Warnings的顯示，或者通過console.ignor程式設計客棧edYellowBox = ['Warning: ...'];來忽略相應的Warning

Chrome Developer Tools

第一步：啟動遠端除錯

在Developer Menu下單擊”Debug JS Remotely” 啟動JS遠端除錯功能。此時Chrome會被開啟，同時會建立一個“http://localhost:8081/debugger-ui.” Tab頁。

第二步：開啟Chrome開發者工具

在該“http://localhost:8081/debugger-ui.”Tab頁下開啟開發者工具。開啟Chrome選單->選擇更多工具->選擇開發者工具。你也可以通過快捷鍵(Command⌘ + Option⌥ + I on Mac,Ctrl + Shift + I on Windows)開啟開發者工具。

斷點除錯 當發生一些"莫名奇妙"的問題錯誤,常用解決方案

這裡的莫名其妙是指，在上一刻程式碼還可以正常執行，在沒有修改的情況下爆紅：

1.重新整理 ！ 重新整理！ 重新整理！

2.重新使用react-native run-xxx命令啟動App

3.刪掉App程式，關掉本地伺服器，清除本地快取

yarn:清空快取

yarn cache clean

npm:清空快取

npm cache clean -f

到此這篇關於React Native 腳手架的基本使用的文章就介紹到這了,更多相關React Native 腳手架內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！