VSCode怎麼配置React Native開發環境

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