安裝 React Native Tools

在外掛市場搜尋 react 找到 React Native Tools 進行安裝：

建立的react-native的工程拖入vscode中

點選F5即可執行react-native

此時可能出現 如下介面，這是因為沒有配置執行檔案

在debug 頁面，點選如下位置，新增configurations

然後點選新增配置，選擇debug android

此時點選F5,則可出現如下介面，表示 react-native以執行起來

此時發現斷點無法生效，且log的資訊感覺特別難看，和使用chrome比起來更難用。

進行斷點除錯

在模擬器介面，按 Ctrl + m，開啟js除錯（點選 Debug JS Remotely）

再看控制檯，就用 console.log 的日誌內容了

此時進行斷點也是生效的了。

開啟安卓模擬器

在as裡建立安卓模擬器過程就不說了，使用as開啟模擬器無疑是最簡單的方式，但是vs + as + 模擬器，電腦受不了啊，所以這裡有兩種不開as開啟模擬器的方式：

在Android\SDK\emulator新建一個bat檔案，內容如下，Nexus_5X_API_28 是模擬器的名字（在avd目錄可檢視名字），然後執行此bat檔案就 ok啦。

emulator.exe -netdelay none -netspeed full -avd Nexus_5X_API_28

如果安裝過flutter的環境，且vs也進行了相關配置，可以直接使用vs開啟模擬器，進入flutter的工程中，點選右下角的 No Devices 選擇想要開啟的模擬器即可：

使用bat開啟模擬器的方式有時會使react-native的找不到裝置，此時是用as開啟或使用flutter的方式開啟就沒這個問題了，在或者清除下模擬器的資料。

記錄一些奇葩的錯誤

出現如下錯誤：

無法進行除錯。執行命令 react-native.cmd run-android --no-packager 時出錯: 執行命令 react-native.cmd run-android --no-packager 時出錯 (error code 101)

可能原因：
1. 查詢不到模擬器了，我試了下重啟模擬器就沒問題了。
2. 檢視模擬器是否開啟了USB除錯，或即使開啟了，再關了，開一次（位置：Settings => System => Developer options(為開啟開發者模式的話，得先進入About emulated device 狂點裡面的 Build number)）

adb 連線 出現 emulator-5554 unauthorized 此時可以嘗試：

• 輸入 adb kill-server ，然後在查詢就會發現裝置處於連線狀態了。
• 刪除.android目錄下 adbkey adbkey.pub 然後重啟模擬器。
• 開啟設定，選擇 System -> Reset options 點選裡面的 Reset app preferences。
• 實在不行的話，開啟 android studio 清除模擬器資料 wipe data。
  

出現如下錯誤：(出現了多處錯誤，如路徑錯誤，重新執行，就可以看到具體的錯誤)

Error: {"type":"InternalError","errors":[],"message":"Metro Bundler has encountered an internal error,please check your terminal error output for more details"}。除錯將不起作用: 請嘗試從應用內重新載入 JS，或重新連線 VS Code 偵錯程式: 無法在 <http://localhost:8081/index.bundle?platform=android&dev=true&minify=false> 處匯入指令碼 (error code 1408)

到此這篇關於VSCode搭建React Native環境的文章就介紹到這了,更多相關VSCode搭建React Native內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！