快捷導(dǎo)航

VSCode搭建React Native環(huán)境

更新時(shí)間：2020年05月07日 15:07:46 作者：啤酒煮雞蛋

這篇文章主要介紹了VSCode搭建React Native環(huán)境，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

安裝 React Native Tools

在插件市場(chǎng)搜索 react 找到 React Native Tools 進(jìn)行安裝：

創(chuàng)建的react-native的工程拖入vscode中

點(diǎn)擊F5即可運(yùn)行react-native

此時(shí)可能出現(xiàn) 如下界面，這是因?yàn)闆](méi)有配置運(yùn)行文件

在debug 頁(yè)面，點(diǎn)擊如下位置，添加configurations

然后點(diǎn)擊添加配置，選擇debug android

此時(shí)點(diǎn)擊F5,則可出現(xiàn)如下界面，表示 react-native以運(yùn)行起來(lái)

此時(shí)發(fā)現(xiàn)斷點(diǎn)無(wú)法生效，且log的信息感覺(jué)特別難看，和使用chrome比起來(lái)更難用。

進(jìn)行斷點(diǎn)調(diào)試

在模擬器界面，按 Ctrl + m，打開(kāi)js調(diào)試（點(diǎn)擊 Debug JS Remotely）

再看控制臺(tái)，就用 console.log 的日志內(nèi)容了

此時(shí)進(jìn)行斷點(diǎn)也是生效的了。

打開(kāi)安卓模擬器

在as里創(chuàng)建安卓模擬器過(guò)程就不說(shuō)了，使用as打開(kāi)模擬器無(wú)疑是最簡(jiǎn)單的方式，但是vs + as + 模擬器，電腦受不了啊，所以這里有兩種不開(kāi)as打開(kāi)模擬器的方式：

在Android\SDK\emulator新建一個(gè)bat文件，內(nèi)容如下，Nexus_5X_API_28 是模擬器的名字（在avd目錄可查看名字），然后運(yùn)行此bat文件就 ok啦。

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

如果安裝過(guò)flutter的環(huán)境，且vs也進(jìn)行了相關(guān)配置，可以直接使用vs打開(kāi)模擬器，進(jìn)入flutter的工程中，點(diǎn)擊右下角的 No Devices 選擇想要打開(kāi)的模擬器即可：

使用bat打開(kāi)模擬器的方式有時(shí)會(huì)使react-native的找不到設(shè)備，此時(shí)是用as打開(kāi)或使用flutter的方式打開(kāi)就沒(méi)這個(gè)問(wèn)題了，在或者清除下模擬器的數(shù)據(jù)。

記錄一些奇葩的錯(cuò)誤

出現(xiàn)如下錯(cuò)誤：

無(wú)法進(jìn)行調(diào)試。執(zhí)行命令 react-native.cmd run-android --no-packager 時(shí)出錯(cuò): 執(zhí)行命令 react-native.cmd run-android --no-packager 時(shí)出錯(cuò) (error code 101)

可能原因：
1. 查找不到模擬器了，我試了下重啟模擬器就沒(méi)問(wèn)題了。
2. 查看模擬器是否開(kāi)啟了USB調(diào)試，或即使開(kāi)啟了，再關(guān)了，開(kāi)一次（位置：Settings => System => Developer options(為打開(kāi)開(kāi)發(fā)者模式的話，得先進(jìn)入About emulated device 狂點(diǎn)里面的 Build number)）

adb 連接出現(xiàn) emulator-5554 unauthorized 此時(shí)可以嘗試：

輸入 adb kill-server ，然后在查找就會(huì)發(fā)現(xiàn)設(shè)備處于連接狀態(tài)了。
刪除.android目錄下 adbkey adbkey.pub 然后重啟模擬器。
打開(kāi)設(shè)置，選擇 System -> Reset options 點(diǎn)擊里面的 Reset app preferences。
實(shí)在不行的話，打開(kāi) android studio 清除模擬器數(shù)據(jù) wipe data。

出現(xiàn)如下錯(cuò)誤：(出現(xiàn)了多處錯(cuò)誤，如路徑錯(cuò)誤，重新運(yùn)行，就可以看到具體的錯(cuò)誤)

Error: {"type":"InternalError","errors":[],"message":"Metro Bundler has encountered an internal error, please check your terminal error output for more details"}。調(diào)試將不起作用: 請(qǐng)嘗試從應(yīng)用內(nèi)重新加載 JS，或重新連接 VS Code 調(diào)試器: 無(wú)法在 <http://localhost:8081/index.bundle?platform=android&dev=true&minify=false> 處導(dǎo)入腳本 (error code 1408)

到此這篇關(guān)于VSCode搭建React Native環(huán)境的文章就介紹到這了,更多相關(guān)VSCode搭建React Native內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: