实例详解VSCode 配置React Native开发环境

企鹅博客
企鹅博客
企鹅博客
28916
文章
0
评论
2020年9月16日01:32:52 评论 4 views 1982字阅读6分36秒

本文主要介绍了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开发环境的步骤

实例详解vue-cli vscode 配置 eslint

利用VSCode做PHP开发的必备插件和配置

以上就是实例详解VSCode 配置React Native开发环境的详细内容,更多请关注php教程其它相关文章!

继续阅读
weinxin
欢迎加入中国站长博客之家
本站的所有资源都会上传分享到博客之家,希望大家互相学习交流进步。
使用js开发数据库 js教程

使用js开发数据库

前端很多时候还是需要保存一些数据的,这里的保存指的是长久的保存,这篇文章就给大家分享关于使用js开发数据库的方法,有需要的朋友可以参考一下 前端很多时候还是需要保存一些数据的,这里的保存指的是长久的保...
Django怎么实现文件下载功能 js教程

Django怎么实现文件下载功能

这次给大家带来Django怎么实现文件下载功能,Django实现文件下载功能的注意事项有哪些,下面就是实战案例,一起来看一下。 基于Django建立的网站,如果提供文件下载功能,最简单的方式莫过于将静...
微信小程序分享页面后跳转回首页 js教程

微信小程序分享页面后跳转回首页

这次给大家带来微信小程序分享页面后跳转回首页,微信小程序分享页面后跳转回首页的注意事项有哪些,下面就是实战案例,一起来看一下。 今天我分享另外一种方法。请看下面.gif; 有没有发现,左上角有返回按钮...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: