首頁 > web前端 > js教程 > 主體

VSCode怎麼配置React Native開發環境

php中世界最好的语言
發布: 2018-04-13 14:04:49
原創
2109 人瀏覽過

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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!