這次帶給大家VSCode怎麼配置React Native開發環境,VSCode配置React Native開發環境的注意事項有哪些,下面就是實戰案例,一起來看一下。
本文介紹了VSCode 配置React Native開發環境的方法,分享給大家,具體如下:
1.安裝VSCode
# 2.安裝外掛程式
# 按F1 並輸入 ext install 並回車, 或使用
# 輸入react-native安裝React Native Tools
假定你已經在裝置上安裝了react native,
如果沒有安裝,請使用npm install -g react-native-cli安裝
或依照官方文件操作
新建一個RN工程 並使用VSCode開啟
安裝完成後 按F1可以看到指令裡多了很多關於React Native的選項
React Native Command
3.配置調試環境
# a.自動設定
# 鍵入shift cmd D或點選icon
# shift cmd D
選擇 React Native:
會自動產生launch.json文件,裡面4個設定選項Debug Android、Debug iOS、Debug iOS、Debug iOS
{ "version": "0.2.0", "configurations": [ { "name": "Debug Android", "program": "${workspaceRoot}/.vscode/launchReactNative.js", "type": "reactnative", "request": "launch", "platform": "android", "sourceMaps": true, "outDir": "${workspaceRoot}/.vscode/.react" }, { "name": "Debug iOS", "program": "${workspaceRoot}/.vscode/launchReactNative.js", "type": "reactnative", "request": "launch", "platform": "ios", "target": "iPhone 5s", "sourceMaps": true, "outDir": "${workspaceRoot}/.vscode/.react" }, { "name": "Attach to packager", "program": "${workspaceRoot}/.vscode/launchReactNative.js", "type": "reactnative", "request": "attach", "sourceMaps": true, "outDir": "${workspaceRoot}/.vscode/.react" }, { "name": "Debug in Exponent", "program": "${workspaceRoot}/.vscode/launchReactNative.js", "type": "reactnative", "request": "launch", "platform": "exponent", "sourceMaps": true, "outDir": "${workspaceRoot}/.vscode/.react" } ] }
b. 手動設定
# 接下來 我們清空 configurations
點選新增配置按鈕,並選擇configuration
#
新增配置
結果如下:
{ "version": "0.2.0", "configurations": [ ] }
在此點選新增配置按鈕,選擇React Native: Debug iOS
配置選項
這樣 運行iOS就配置好了
{ "version": "0.2.0", "configurations": [ { "name": "Debug iOS", "program": "${workspaceRoot}/.vscode/launchReactNative.js", "type": "reactnative", "request": "launch", "platform": "ios", "sourceMaps": true, "target": "iPhone 6s", "outDir": "${workspaceRoot}/.vscode/.react" } ] }
點選設定左邊的選項,會有Debug iOS選項
Debug iOS
# 接下來 就可以點選上面選項的運行按鈕,成功運行iOS啦
Hello world
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
以上是VSCode怎麼配置React Native開發環境的詳細內容。更多資訊請關注PHP中文網其他相關文章!