VSCode搭建React Native環(huán)境
安裝 React Native Tools
在插件市場搜索 react 找到 React Native Tools 進(jìn)行安裝：
創(chuàng)建的react-native的工程拖入vscode中
點(diǎn)擊F5即可運(yùn)行react-native
此時(shí)可能出現(xiàn) 如下界面，這是因?yàn)闆]有配置運(yùn)行文件
在debug 頁面，點(diǎn)擊如下位置，添加configurations
然后點(diǎn)擊添加配置，選擇debug android
此時(shí)點(diǎn)擊F5,則可出現(xiàn)如下界面，表示 react-native以運(yùn)行起來
此時(shí)發(fā)現(xiàn)斷點(diǎn)無法生效，且log的信息感覺特別難看，和使用chrome比起來更難用。
進(jìn)行斷點(diǎn)調(diào)試
在模擬器界面，按 Ctrl + m，打開js調(diào)試（點(diǎn)擊 Debug JS Remotely）
再看控制臺，就用 console.log 的日志內(nèi)容了
此時(shí)進(jìn)行斷點(diǎn)也是生效的了。
打開安卓模擬器
在as里創(chuàng)建安卓模擬器過程就不說了，使用as打開模擬器無疑是最簡單的方式，但是vs + as + 模擬器，電腦受不了啊，所以這里有兩種不開as打開模擬器的方式：
在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
如果安裝過flutter的環(huán)境，且vs也進(jìn)行了相關(guān)配置，可以直接使用vs打開模擬器，進(jìn)入flutter的工程中，點(diǎn)擊右下角的 No Devices 選擇想要打開的模擬器即可：
使用bat打開模擬器的方式有時(shí)會(huì)使react-native的找不到設(shè)備，此時(shí)是用as打開或使用flutter的方式打開就沒這個(gè)問題了，在或者清除下模擬器的數(shù)據(jù)。
記錄一些奇葩的錯(cuò)誤
出現(xiàn)如下錯(cuò)誤：
無法進(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. 查找不到模擬器了，我試了下重啟模擬器就沒問題了。
2. 查看模擬器是否開啟了USB調(diào)試，或即使開啟了，再關(guān)了，開一次（位置：Settings => System => Developer options(為打開開發(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 然后重啟模擬器。
- 打開設(shè)置，選擇 System -> Reset options 點(diǎn)擊里面的 Reset app preferences。
- 實(shí)在不行的話，打開 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)試將不起作用: 請嘗試從應(yīng)用內(nèi)重新加載 JS，或重新連接 VS Code 調(diào)試器: 無法在 <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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
React項(xiàng)目中fetch實(shí)現(xiàn)跨域接收傳遞session的解決方案
這篇文章主要介紹了React項(xiàng)目中fetch實(shí)現(xiàn)跨域接收傳遞session的解決方案,本次項(xiàng)目使用了react框架，同時(shí)使用fetch取代ajax作為獲取接口數(shù)據(jù)的交互方法，下面就對這次問題的解決做個(gè)總結(jié)，需要的朋友可以參考下2022-04-04
react實(shí)現(xiàn)導(dǎo)航欄二級聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了react實(shí)現(xiàn)導(dǎo)航欄二級聯(lián)動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了在react中使用windicss的問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
關(guān)于React16.0的componentDidCatch方法解讀
這篇文章主要介紹了關(guān)于React16.0的componentDidCatch方法解讀，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
React如何實(shí)現(xiàn)瀏覽器打印部分內(nèi)容詳析
這篇文章主要給大家介紹了關(guān)于利用React如何實(shí)現(xiàn)瀏覽器打印部分內(nèi)容的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用React具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要為大家介紹了React性能debug場景解決記錄，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
一些剛開始學(xué)習(xí) React，或者從其他框架轉(zhuǎn)入 React 的開發(fā)者，一開始可能不會(huì)太關(guān)注性能。因?yàn)樾枰恍r(shí)間來發(fā)現(xiàn)新學(xué)習(xí)的框架的性能缺點(diǎn)。這篇文章主要介紹提高React性能的技巧，感興趣的同學(xué)可以參考閱讀2023-04-04
這篇文章主要介紹了React如何解決樣式污染問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
react中form.setFieldvalue數(shù)據(jù)回填時(shí) value和text不對應(yīng)的問題及解決方法
這篇文章主要介紹了react中form.setFieldvalue數(shù)據(jù)回填時(shí) value和text不對應(yīng)的問題及解決方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-07-07
一文教你如何避免React中常見的8個(gè)錯(cuò)誤
這篇文章主要來和大家一起分享在?React?開發(fā)中常見的一些錯(cuò)誤,以及如何避免這些錯(cuò)誤,理解這些問題背后的細(xì)節(jié),防止犯下類似的錯(cuò)誤,需要的可以參考下2023-12-12