溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

VSCode 配置React Native開發(fā)環(huán)境的方法

發(fā)布時間：2020-08-25 03:24:31 來源：腳本之家 閱讀：1716 作者：冰琳92 欄目：web開發(fā)

本文介紹了VSCode 配置React Native開發(fā)環(huán)境的方法，分享給大家，具體如下：

1.安裝VSCode

2.安裝插件

按F1 并輸入 ext install 并回車, 或者使用

輸入react-native安裝React Native Tools

假定你已經(jīng)在設(shè)備上安裝了react native，

如果沒有安裝，請使用npm install -g react-native-cli安裝

或者按照官方文檔操作

新建一個RN工程 并使用VSCode打開

安裝完成后 按F1可以看到命令里多了很多關(guān)于React Native的選項(xiàng)

VSCode 配置React Native開發(fā)環(huán)境的方法

React Native Command

3.配置調(diào)試環(huán)境

a.自動配置

鍵入shift+cmd+D或者點(diǎn)擊icon

VSCode 配置React Native開發(fā)環(huán)境的方法

shift+cmd+D

再點(diǎn)擊

VSCode 配置React Native開發(fā)環(huán)境的方法

設(shè)置

選擇 React Native：

VSCode 配置React Native開發(fā)環(huán)境的方法

會自動生成launch.json文件，里面4個配置選項(xiàng)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

VSCode 配置React Native開發(fā)環(huán)境的方法

點(diǎn)擊添加配置按鈕，并選擇configuration

VSCode 配置React Native開發(fā)環(huán)境的方法

添加配置

結(jié)果如下：

{
  "version": "0.2.0",
  "configurations": [
    
  ]
}

在此點(diǎn)擊添加配置按鈕，選擇React Native: Debug iOS

VSCode 配置React Native開發(fā)環(huán)境的方法

配置選項(xiàng)

這樣 運(yùn)行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"
    }
  ]
}

點(diǎn)擊設(shè)置左邊的選項(xiàng)，會有Debug iOS選項(xiàng)

VSCode 配置React Native開發(fā)環(huán)境的方法

Debug iOS

接下來 就可以點(diǎn)擊上面選項(xiàng)的運(yùn)行按鈕，成功運(yùn)行iOS啦

VSCode 配置React Native開發(fā)環(huán)境的方法

Hello world

4.其它實(shí)用插件

  1. Auto Close Tag
  2. Auto Complete Tag
  3. AutoFileName
  4. Auto Rename Tag
  5. Auto Import
  6. Path Intellisense
  7. Color Highlight

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手