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

4.其它实用插件

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

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

(0)

相关推荐

  • Windows下React Native的Android环境部署及布局示例

    搭建基础环境 JDK(必须,不解释) SDK(建议使用Android Studio,集成SDK以及模拟器) genymotion(如果是使用真机或者Android Studio自带的模拟器,可以选择不装) NVM(node版本控制器,需要node4.0以上版本) 以上配置不是必须,可自行选择适合自己的环境,部分安装过程可能会涉及到翻墙,需要配置代理 配置踩坑记录 genymotion 这里选择genymotion模拟器来讲解,也会提一下Android Studio自带的模拟器的一些注意点,使用真

  • React Native搭建iOS开发环境

    一.写在前面 1. 什么是React-Native? React-Native是:Facebook 在2015年初React.js技术研讨大会上公布的一个开源项目.支持用开源的JavaScript库React.js来开发iOS和Android原生App.初期仅支持iOS平台,同年9月份,该开源项目同时支持Android平台. React Native的原理是:在JavaScript中用React抽象操作系统原生的UI组件,代替DOM元素来渲染,比如以<View>取代<div>,以&

  • React Native 搭建开发环境的方法步骤

    本文介绍了React Native 搭建开发环境,分享给大家,具体如下: 准备工作 node -v:确认是否安装Node,若已经成功安装了,则执行下面的命令:否则先进行Node的安装. npm install -g create-react-native-app:使用npm快速创建React Native应用. create-react-native-app AwesomeProject:创建名为AwesomeProject的项目. cd AwesomeProject:进入项目所在文件目录. y

  • React Native 环境搭建的教程

    一直对 RN 充满了好奇,前段时间学习并实际使用 RN 来开发了一个简单的应用.第一步从环境搭建开始. 环境搭建 分别需要安装Node,Watchman,Yarn 和 RN 命令行工具,推荐把 react-devtools 的 debug 工具也一并安装了 $ brew install node $ brew install watchman $ brew install yarn $ npm install -g react-native-cli $ npm install -g react-

  • 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可以看到命令里多了很

  • 在Ubuntu中安装VSCode并配置C/C++开发环境的方法步骤

    第一步,打开Ubuntu Software下载VSCode.(so easy) 官网地址:https://code.visualstudio.com/docs/?dv=linux64_deb 然后使用 sudo dpkg -i  xxx.deb解压即可 第二步,如果你的电脑中没有gcc,g++,gdb的话,可以通过以下代码获得. sudo apt-get update //访问源列表,并读取软件列表 sudo apt-get install gcc sudo apt-get install g+

  • 教你快速搭建 React Native 开发环境

    React Native 官网地址:https://www.reactnative.cn/docs/environment-setup 开发平台 Windows 目标平台 Android 1.安装依赖 必须安装的依赖有 Node.JDK 和 Android Studio,Node 版本不得低于 14,React Native 需要 JDK 11,查看 JDK 版本的指令如下: javac -version 1-1.下载和安装 android studio 1-2.安装 Android SDK 目

  • CentOS 7下配置Ruby语言开发环境的方法教程

    本文跟大家分享的是在CentOS 7下配置Ruby语言开发环境的方法教程,分享出来供大家参考学习,下面来看看详细的介绍: 安装Ruby 2.2 CentOS7存储库中的Ruby版本为2.0,但如果需要,可以使用RPM软件包安装2.2 1.添加CentOS SCLo软件集合存储库 [root@linuxprobe ~]# yum -y install centos-release-scl-rh centos-release-scl # set [priority=10] [root@linuxpr

  • 使用VSCODE配置GO语言开发环境的完整步骤

    1. 安装GO SDK 官方下载地址是:golan.google.cn/dl 2. 安装完毕后,会自动在配置文件中加入一些内容,其中比较重要的三个是: GOROOT(具体GO语言在硬盘上安装的位置,比如D:/GO) GOPATH(未来使用go install安装第三方工具包时,都会安装在GOPATH指定文件夹下的src或bin目录下,比如C:/Users/Administrator/Go) 最后一个是GO语言安装路径下的bin文件夹路径(例如:D:/GO/bin)添加到PATH中. 3. 在终端

  • Micropython固件使用Pico刷固件并配置VsCode开发环境的方法

    MicroPython是Python 3语言的精简高效实现,包括Python标准库的一小部分,经过优化可在微控制器和受限环境中运行.WiFi模块中的ESP8266/ESP32都已支持MicroPython. Pico引脚图 一.为Pico烧录Micropython固件 1.准备 / 下载固件 下载链接:固件下载 MicroPython固件为:pico_micropython_20210121.uf2文件. 2.烧录固件 务必按顺序操作!否则会烧录失败! (1)一直按住树莓派Pico板上的BOOT

  • Webpack 4.x搭建react开发环境的方法步骤

    本文介绍了了Webpack 4.x搭建react开发环境的方法步骤,分享给大家,也给自己留个笔记 必要依赖一览(npm install) 安装好. "dependencies": { "babel-core": "^6.26.3", "babel-loader": "^7.1.5", "babel-preset-env": "^1.7.0", "react&

  • VSCode搭建React Native环境

    安装 React Native Tools 在插件市场搜索 react 找到 React Native Tools 进行安装: 创建的react-native的工程拖入vscode中 点击F5即可运行react-native 此时可能出现 如下界面,这是因为没有配置运行文件 在debug 页面,点击如下位置,添加configurations 然后点击添加配置,选择debug android 此时点击F5,则可出现如下界面,表示 react-native以运行起来 此时发现断点无法生效,且log的

  • Ubuntu 20.04 下安装配置 VScode 的 C/C++ 开发环境(图文教程)

    前言: 之前安装了Ubuntu 18.04,结果在安装Codeblocks / VScode还是安装gcc,c/c++的时候出现了一堆错误(缺失依赖树等等问题,换源也无法成功),整了一个下午没有任何进展,网上找不到任何解决方法,于是只能重装了Ubuntu 20.04,之后Codeblocks倒是安装成功了,但是明明在已经安装了C/C++跟GCC编译包的情况,它仍然显示在该路径下找不到,无论路径是默认自动定位在/usr 还是在/usr/bin 之下仍然出现此情况,同样网上找不到任何解决方法,于是只

随机推荐