使用VSCode运行React Native项目

最新推荐文章于 2024-07-24 12:38:35 发布
最新推荐文章于 2024-07-24 12:38:35 发布
阅读量1.1w 收藏 11
点赞数
分类专栏： ios随笔 React Native 文章标签： 使用VSCode运行React Native项目
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013983033/article/details/92813675
版权

准备工作：

  • 安装 VSCode
  • 搭建React Native环境

1、创建React Native项目

  • 创建文件并进入RnDemo mkdir RnDemo
  • 创建项目 react-native init RnDemo

2、用VSCode配置安装 如图（这是我根据自己需要添加的）
在这里插入图片描述
3、添加项目 点击打开 如图
在这里插入图片描述
4、添加配置
在这里插入图片描述
然后会出现下图配置文件
在这里插入图片描述
选择如图
在这里插入图片描述
最后运行
（1）可以点击下图运行
在这里插入图片描述
（2）直接终端运行 进入项目目录 输入 react-native run-ios

**这个地方注意  服务一定要打开  如果没有开 可以自己打开如图**

在这里插入图片描述

运行结果 在这里插入图片描述
按住 command+d 弹出下图 可以进行选择
在这里插入图片描述
OK 完成 谢谢

哈皮吖
关注
专栏目录
vscode 搭建react-native 详解
guoer9973的专栏
01-22 3万+
本文记录如何使用vscode打造一个现代化的RN开发环境，旨在提高开发效率和质量。问题 代码没有提示： 许多刚接触RN开发的非前端同学，都会问“哪个编辑器有智能提示？”。。。而对于前端同学来说，现在的日子已经好很多了，要什么自行车。 低级代码错误： 这里的错误是指类似拼写错误，符号错误等。写完代码，跑起来各种报错，有时候费死劲的找，最后发现是个中文的分号问题。 解决办法可选的方案大概有： 使用t
vscode调试react native
qq_39575872的博客
11-26 1129
vscode调试react native 1、安装rn环境，建立rn项目，此处不做叙述 2、在vscode中安装Debugger for Chrome扩展，看下图 3、点击debug按钮、点击小齿轮、选择环境、添加配置。若是直接打开了launch.json文件，请到项目根目录删除./.vscode文件夹再重复以上操作 5、调试器连接包生成工具后，摇一摇唤出菜单选择Debug，再回到VsCod...
使用VS Code开发react native项目
qq_36893477的博客
06-04 1711
以上步骤涵盖了在VS Code中开发React Native项目所需的基本设置和配置。通过这些步骤，你可以创建、运行和调试React Native应用。
React 开发环境搭建 超详细 全面 推荐
最新发布
weixin_43483590的博客
07-24 790
今天把React开发环境进行配置以及创建一个React项目，这里顺便把过程记录一下，方便自己以后查看，也欢迎正在学习react的小伙伴参考，如果发现问题请评论区留言指正，共同学习共同进步，感谢。
vscode react-native
fivestar2009的博客
07-28 1756
vscode 使用react-native init --version=”0.55.4” WangZg 工程后，使用vscode 打开文件夹，指定WangZg文件夹，就打开了WangZg工程 Vscode发现检查错误 File-perference-settings --workspace settings Settings.json中，增加 "javascript.validate.en...
VSCode配置React Native调试环境
王同学LM的专栏
04-09 2407
VSCode上搭建React Native调试环境
使用VsCode开发React-Native[debug调试+智能提示]
热门推荐
young_Emily的博客
01-08 4万+
前言： 这篇博文主要介绍两个方面： 1. react-native项目的调试 2. react-native项目的代码智能提示 这两个问题主要是由于reactnative和vue，react等框架不一样，这个是跨平台的，写的app不能直接在网页上即看即所得[意味着不能”直接地”console.log打印..]只能在真机调试或者在模拟器中查看，所以关于调试就显得特别重要。其次
React Native的VSCode
villa_mou的博客
05-15 453
不久前，我认识的最有经验的React Native开发人员之一JaniEväkallio发表了一篇很棒的文章，介绍了Formidable于去年三月开始将其用于新的React Native应用程序的所有不同工具。 自从我开始开发React Native以来，这给了我灵感，让我首先去解决一个我遇到的很多问题：选择一个IDE并正确设置它-而不必每隔一个月进行更改。正如我提到以前的文章为阵营本土首发，找到适当的设备开始的右脚上的一个基本组成部分：所以我决定开始新的，按照我自己的建议，并安装Visual Studio
VSCode搭建React Native环境
11-21
点击F5即可运行react-native 此时可能出现 如下界面，这是因为没有配置运行文件 在debug 页面，点击如下位置，添加configurations 然后点击添加配置，选择debug android 此时点击F5,则可出现如下界面，表示 react...
React Native开发环境搭建，VS Code运行项目步骤详解
Zh.快乐的程序猿的博客
03-23 2063
React Native开发环境搭建，VS Code运行项目步骤详解
使用vscode调试和开发react-native项目
qq_36893477的博客
06-06 491
具体请查看https://blog.csdn.net/zuo_er_lyf/article/details/98733829。
vscode-react-native：React Native的VSCode扩展-支持调试和编辑器集成
02-05
React本机工具 稳定： 预习： React Native Tools预览 该扩展程序有一个，该每天在每天发生更改的晚上9点（太平洋标准时间）发布。 为避免冲突，如果同时安装了两个扩展，则将激活唯一的稳定版本。 因此，要使用预览版本，需要禁用或删除稳定版本并重新加载VS Code。 关于扩展 这个VS Code扩展为React Native项目提供了一个开发环境。 使用此扩展，您可以调试代码并从命令面板快速运行react-native命令。 目录 入门 在继续之前，请确保您： 。 正在使用并。 在VS Code中打开您的React Native项目根文件夹。 请注意，该扩展名使
vscode 连接夜神模拟器 运行 react native项目 (很简单的方法)
tengyuxin的博客
01-20 2600
前言：我这种方式不需要过多配置，只是需要先启动Android studio ，之后再启动vsCode 准备阶段：下载夜神模拟器 1. 开启夜神服务 进入到夜神安装的bin目录下，执行 nox_adb.exe connect 127.0.0.1:62001 2. 修改为手机模式 点击夜神模拟器(不是夜神多开器)，开启的默认为平板版模式，将其修改为手机模式 3. 将夜神设置为开发者模式 在首页点击工具，进入设置， 第一，滑到关于平板电脑，进去连续点击版本号，直到进入开发者..
(004)RN开发VSCode调试ReactNative项目
沐雨07的专栏
01-19 1392
1. 添加配置文件 点击小蜘蛛后，按第一步、第二步操作即可 接着选择调试平台☑️下面四个。点击OK，会生成一个launch.json文件并打开。 2. 添加断点 接下来，我们回到DEDUG，点击右边的选择栏，选择Debug IOS 在index.ios.js（IOS界面搭建文件）文件上设置一个断点 3. 开始Debug 快捷键F1—>输入 ReactNati...
VSCode 搭建 React Native 环境
weixin_30273931的博客
06-19 656
安装 React Native Tools 在插件市场搜索 react 找到 React Native Tools 进行安装： 创建的react-native的工程拖入vscode中 点击F5即可运行react-native 此时可能出现 如下界面，这是因为没有配置运行文件 在debug 页面，点击如下位置，添加configurations 然后点击添加配置，选择debug android...
VSCode React Native配置
映映的博客
04-17 987
React Native Tools 最基本的工具 ESLint 代码检查的插件,一定要有,很不错. tortoise-svn svn管理工具 Babel ES6/ES7 ES6，ES7语法加亮检查插件 Dash 在线文档 Path Intellisense 可以增加已经路径或文件的提示 Typings auto installer 根据package.json 自动加载...
vs code react-native 安卓调试_十大最受欢迎的 React Native 应用开发编辑器
weixin_39843677的博客
11-21 247
市面上用于开发工作的编辑器非常多，笔者会经常因为不同的编程语言该如何选择好用的编辑器而感到纠结。而在随后从事 React Native 开发工作过程中，对相应的编辑器做了一些探索和研究，本文总结了一些非常适合移动应用开发的编辑器和 IDE。1. Nuclide官网：https://nuclide.io/Github 项目地址：facebook / nuclide(https://github.co...
react native 在vscode上运行
weixin_30266885的博客
07-13 280
1、在用react-native init xxx 创建rn项目之后，在Android目录中创建local.properties文件 =后面接上sdk地址 2、react-native start 命令开启RN守护进程 . 3、adb connect 127.0.0.1:62001 命令 连接上夜神模拟器 4、react-native run-android 将本地...
VSCode中配置React Native环境与调试指南
本文将详细介绍如何使用VSCode搭建React Native开发环境，并解决在过程中可能遇到的问题。 首先，我们需要安装React Native Tools插件。这个插件可以在VSCode的插件市场中找到，通过搜索"react native tools"进行...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值