VSCode 配置React Native開發環境的方法

2019-11-19 14:38:32

字體：大中小

來源：轉載

供稿：網友

本文介紹了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選項