铁雪资源网 Design By www.gsvan.com

本文介绍了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的选项

VSCode 配置React Native开发环境的方法

React Native Command

3.配置调试环境

a.自动配置

键入shift+cmd+D或者点击icon

VSCode 配置React Native开发环境的方法

shift+cmd+D

再点击

VSCode 配置React Native开发环境的方法

设置

选择 React Native:

VSCode 配置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

VSCode 配置React Native开发环境的方法

点击添加配置按钮,并选择configuration

VSCode 配置React Native开发环境的方法

添加配置

结果如下:

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

在此点击添加配置按钮,选择React Native: Debug iOS

VSCode 配置React Native开发环境的方法

配置选项

这样 运行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选项

VSCode 配置React Native开发环境的方法

Debug iOS

接下来 就可以点击上面选项的运行按钮,成功运行iOS啦

VSCode 配置React Native开发环境的方法

Hello world

4.其它实用插件

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

标签:
VSCode,配置React,Native,VSCode,配置React,Native开发环境

铁雪资源网 Design By www.gsvan.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
铁雪资源网 Design By www.gsvan.com

评论“VSCode 配置React Native开发环境的方法”

暂无VSCode 配置React Native开发环境的方法的评论...

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。