歡迎您光臨本站 註冊首頁

VSCode搭建React Native環境

←手機掃碼閱讀     hongdian2012 @ 2020-05-08 , reply:0

安裝 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打開模擬器的方式:
在AndroidSDKemulator新建一個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 調試器: 無法在

處導入腳本 (error code 1408)

[hongdian2012 ] VSCode搭建React Native環境已經有275次圍觀

http://coctec.com/docs/vscode/show-post-233307.html