這次帶給大家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中文網其他相關文章！
