VS code开发运行react native项目

最新推荐文章于 2025-06-20 10:15:28 发布
转载 最新推荐文章于 2025-06-20 10:15:28 发布 · 1.9k 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：https://www.cnblogs.com/mica/p/11181538.html
文章标签：

#react native #1024程序员节

本文详细介绍了在使用React Native进行项目开发时遇到的启动权限问题及解决方案。当尝试使用react-native start命令启动项目时，可能会遇到由于权限不足导致的脚本加载失败错误。文章提供了通过调整PowerShell执行策略来解决此问题的具体步骤。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1、创建好react native项目，使用VS code打开项目，在android文件下的local.properties写上sdk的路径

2、在终端-新建终端，在终端执行 react-native start命令

报react-native : 无法加载文件 C:\Users\admin\AppData\Roaming\npm\react-native.ps1，因为在此系统上禁止运行脚本 错误，这是因为权限问题导致的

解决方法：找到powershell,使用管理员权限运行，然后输入set-ExecutionPolicy RemoteSigned  ，然后选择Y 或者A ，就好了

3、再在终端输入 react-native start命令运行即可成功

vscode 搭建react-native 详解
guoer9973的专栏
01-22 3万+
本文记录如何使用vscode打造一个现代化的RN开发环境，旨在提高开发效率和质量。问题 代码没有提示： 许多刚接触RN开发的非前端同学，都会问“哪个编辑器有智能提示？”。。。而对于前端同学来说，现在的日子已经好很多了，要什么自行车。 低级代码错误： 这里的错误是指类似拼写错误，符号错误等。写完代码，跑起来各种报错，有时候费死劲的找，最后发现是个中文的分号问题。 解决办法可选的方案大概有： 使用t
React Native开发环境搭建，VS Code运行项目步骤详解
Zh.快乐的程序猿的博客
03-23 2553
React Native开发环境搭建，VS Code运行项目步骤详解
使用VS Code开发react native项目
qq_36893477的博客
06-04 4250
以上步骤涵盖了在VS Code中开发React Native项目所需的基本设置和配置。通过这些步骤，你可以创建、运行和调试React Native应用。
VS Code React Native 扩展开发指南
最新发布
gitblog_00444的博客
06-20 334
VS Code React Native 扩展开发指南 开发环境准备 开发VS Code React Native扩展前，需要做好以下准备工作： 清理现有扩展 为避免与现有安装产生冲突，建议删除已安装的扩展： Linux/macOS：删除~/.vscode/extensions/msjsdiag.vscode-react-native-<版本号>目录 Windows：删除C:\U...
使用VSCode开发React-Native的正确姿势
CY的博客
10-26 1万+
使用VSCode开发React-Native的正确姿势 前言 使用VSCode开发React-Native是个不错的选择，因为这个编辑器十分简洁、流畅，并且微软官方提供了React Native Tools插件，支持代码高亮、debug以及代码提示等十分强大的功能，并且VSCode本身的代码跳转十分优秀。但是我下载了此插件，发现其他功能正常，唯独代码没法正确提示，右下角也没
使用VSCode运行React Native项目
哈皮吖的博客
06-19 1万+
准备工作： 安装 VSCode 搭建React Native环境 1、创建React Native项目 创建文件并进入RnDemo mkdir RnDemo 创建项目 react-native init RnDemo 2、用VSCode配置安装 如图（这是我根据自己需要添加的） 3、添加项目 点击打开 如图 4、添加配置 然后会出现下图配置文件 选择如图 最后运行 （1）可...
使用VsCode开发React-Native[debug调试+智能提示]
beautiful77moon的博客
02-19 2415
前言：  这篇博文主要介绍两个方面： 1. react-native项目的调试 2. react-native项目的代码智能提示  这两个问题主要是由于reactnative和vue，react等框架不一样，这个是跨平台的，写的app不能直接在网页上即看即所得[意味着不能”直接地”console.log打印..]只能在真机调试或者在模拟器中查看，所以关于调试就显得特别重要。其次关于智能提示：rea...
VS Code开发React-Native及Flutter 开启无线局域网安卓真机调试问题
08-19
VS Code 开发 React-Native 及 Flutter 无线局域网安卓真机调试问题解决方案 在本篇文章中，我们将介绍如何使用 VS Code 开发 React-Native 及 Flutter，并开启无线局域网安卓真机调试。这篇文章将详细介绍 Flutter...
android studio 开发react native,安装android Studio和运行react native项目（跳坑篇）
weixin_31064267的博客
05-27 1529
1.需配环境变量，值为sdk的地址。ANDROID_HOME 值：E:\Users\HP\AppData\Local\Android\sdk2.下载gradle-2.14.1-all.zip 包修改地址为本地gradle压缩包的地址，这里应该注意路径不可有带空格的，比如Program Files是会出错的。先打开在android Studio导入项目要导入项目android目录下才有效，如E:\...
react-native-smart-code:支持React和ReactNative。在react-native中，它创建base64字符串，它是qrcode或条形码，并且没有webview。在react中，我们使用jsbarcode
05-23
react-native-smart-code 入门 $ npm install react-native-smart-code --save 或者 $ yarn add react-native-smart-code 链接（仅对于React Native <= 0.59，React Native> = 0.60跳过此步骤，因为自动链接...
React Native在VS Code debuger调试全流程终极指南
老猿阿浪的博客
05-16 1230
"为什么我的断点总是不生效？" —— 这是 React Native 开发者使用 VS Code 调试时最常见的痛点。本文将手把手带你掌握 VS Code 调试 React Native 的完整方案，从零配置到高级技巧，彻底解决你的调试难题。
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 开发
keen_zuxwang的博客
05-08 3289
vscode react native 开发： (vscode免费开源的现代化轻量级代码编辑器, 针对React Native端的开发, React Native项目的JAVA端可用android studio进行开发) 1、首先确保已安装好react-native命令行工具 npm install react-native-cli -g 2、命令行创建项目 react-native init myrnprj
vscode 连接夜神模拟器 运行 react native项目 (很简单的方法)
tengyuxin的博客
01-20 3094
前言：我这种方式不需要过多配置，只是需要先启动Android studio ，之后再启动vsCode 准备阶段：下载夜神模拟器 1. 开启夜神服务 进入到夜神安装的bin目录下，执行 nox_adb.exe connect 127.0.0.1:62001 2. 修改为手机模式 点击夜神模拟器(不是夜神多开器)，开启的默认为平板版模式，将其修改为手机模式 3. 将夜神设置为开发者模式 在首页点击工具，进入设置， 第一，滑到关于平板电脑，进去连续点击版本号，直到进入开发者..
(004)RN开发VSCode调试ReactNative项目
沐雨07的专栏
01-19 1560
1. 添加配置文件 点击小蜘蛛后，按第一步、第二步操作即可 接着选择调试平台☑️下面四个。点击OK，会生成一个launch.json文件并打开。 2. 添加断点 接下来，我们回到DEDUG，点击右边的选择栏，选择Debug IOS 在index.ios.js（IOS界面搭建文件）文件上设置一个断点 3. 开始Debug 快捷键F1—>输入 ReactNati...
Visual Studio Code React Native 开发教程
gitblog_01073的博客
03-29 1275
Visual Studio Code React Native 开发教程 1. 项目介绍 Visual Studio Code React Native 扩展是微软开发的一个开源项目，它允许开发者使用 Visual Studio Code 编辑器和调试功能来开发 React Native 应用。React Native 是一个由 Facebook 开发的框架，它允许开发者使用 JavaScript...
vscode搭配react-native开发环境
u012869941的博客
11-09 2410
react-native 的js开发工具选择之VSCode前言查阅一些相关资料后，总结不推荐的工具Top1：IDE：NuclideTop2：WebStorm推荐的工具VS Code开发RN环境配置1、下载安装VS Code2、添加RN开发需要的插件3、常用快捷键设置4、配置VSCode调试ReactNative，摆脱手动输入命令运行RN项目的苦恼 前言 从网上翻阅了一些开发react-native...
VSCode配置React Native调试环境
LM Wang的专栏
04-09 2883
VSCode上搭建React Native调试环境
React Native开发之动画(Animations)
热门推荐
Leo的专栏
06-28 4万+
博主这个系列的文章 React Native开发之IDE（Atom+Nuclide） React Native开发之FlexBox代码＋图解 React Native的Navigator详解 另外，我在Github上建立了一个仓库来搜集优秀的React Native库和优秀的博客等ReactNativeMaterials资料 官方关于动画的介绍 官方给出的复杂动画的示例 开源项目react-nati
在vs code配置React Native环境
05-23
### 配置 VS Code 以开发 React Native 的方法 #### 安装必要的软件和工具 为了在 VS Code 中成功配置 React Native 开发环境，需要先完成以下准备工作： 1. **安装 Node.js 和 npm** React Native 依赖于 Node.js。可以从官方站点下载并安装适合操作系统的版本[^3]。 2. **安装 JDK (Java Development Kit)** 如果目标平台是 Android，则还需要安装 JDK 来支持 Android 工具链。 3. **安装 React Native CLI** 使用 npm 全局安装 `react-native-cli` 命令行工具，以便创建和管理 React Native 项目： ```bash npm install -g react-native-cli ``` 4. **安装 VS Code 并设置扩展** 下载并安装 Visual Studio Code 编辑器[^1]。随后，在 VS Code 扩展市场中搜索并安装以下常用插件： - React Native Tools - ESLint - Prettier - Code formatter 这些插件能够增强代码编辑体验以及提供调试功能。 #### 创建一个新的 React Native 项目 可以通过 React Native CLI 创建新项目： ```bash npx react-native init MyProjectName ``` 此命令会初始化一个名为 `MyProjectName` 的全新 React Native 应用程序目录结构[^1]。 #### 设置调试环境 要启用 VS Code 对项目的调试能力，需按照以下步骤进行调整： 1. **打开 launch.json 文件** 在 `.vscode/launch.json` 路径下找到或新建该文件，并将其内容修改为类似于下面的形式[^4]: ```json { "version": "0.2.0", "configurations": [ { "name": "Debug Android Hermes - Experimental", "request": "launch", "type": "reactnativedirect", "cwd": "${workspaceFolder}", "platform": "android" } ] } ``` 2. **启动 Metro Bundler** 运行应用前，确保 Metro bundler 正常工作。可以在终端执行下列指令开启服务： ```bash npx react-native start ``` 3. **构建与运行应用程序** 切换到另一个终端窗口，输入对应设备模拟器的启动命令。例如针对安卓设备使用： ```bash npx react-native run-android ``` 至此，已完成整个基于 VS Code 的 React Native 开发环境搭建过程[^4]。 ---
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值