Windows下的React-Native开发调试环境安装

最新推荐文章于 2024-11-02 16:12:49 发布

原创

最新推荐文章于 2024-11-02 16:12:49 发布 · 2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#android #ios #windows #react-native #yarn

Windows下的React-Native开发调试环境安装

初学React-Native，需要搭建一套开发环境。
教程视频中老师用的是Mac，我用的Window，在说环境配置的时候基本是一脸懵逼
本以为React是开发一套，IOS和Android都能跑。看了视频后，我突然感觉React还是倾向于IOS一些

环境搭建

Windows 不像 Mac 上那么简单，也只能面向 Android 去做选择。
既然是面向 Andorid，那么 Java 环境是必不可少的。

Java

Java下载

项	值
JAVA_HOME	C:\Program Files\Java\jdk1.8.0_151
CLASSPATH	.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar
PATH	%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin

Android SDK

推荐通过 Android Studio 一并进行安装下载

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

一个技术渣

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

React Native在VS Code debuger调试全流程终极指南

老猿阿浪的博客

05-16

1215

"为什么我的断点总是不生效？" —— 这是 React Native 开发者使用 VS Code 调试时最常见的痛点。本文将手把手带你掌握 VS Code 调试 React Native 的完整方案，从零配置到高级技巧，彻底解决你的调试难题。

React-Native-Windows 开发环境

MichaelMCFD的博客

05-15

1209

网上关于react-native-windows的踩坑好少，所以自己摸索着看看吧。

参与评论您还未登录，请先登录后发表或查看评论

在Windows系统上调试与发布react-native 开发的IOS系统的全过程

12-29

在Windows系统上调试与发布react-native 开发的IOS系统的全过程

windows如何调试react native

guhu3213的博客

01-02

731

如题： js的代码，只是些界面代码，用chrome可以调试。但是当遇见数据实时更新，比如调试个用户列表，调试个原生java代码。我又想和Android显示同步，该如何？我只用过eclipse加avd来（方便，傻瓜）。现在面对它我有点不知道，所以想来请问大家！！！

React Native 在 windows 下的开发调试

bigsea622的专栏

02-07

1189

用Android真机调试：设置开发者USB调试不赘述，不会的请自行搜索。 cmd命令行或Cygwin输入 adb devices 查看是否有设备。运行RN项目时，手机和电脑USB连接并且电脑和手机设备在同一个Wifi网络环境下。输入 react-native run-android 期间会弹出 node 命令窗口，不用管，跑日志的。跑不起来请查相

React-Native真机调试（Android，Windows）

FUCK

08-29

4237

首先将项目通过AndroidStudio打开,运行到手机上，因为通过webstorm运行老是报错其次通过设置打开安装应用设置将悬浮窗打开如下图：然后轻轻摇晃手机弹出菜单选择Dev Settings之后点击Debug server host & prot for device配置自己路由器ip地址和端口号如下图：最后重新打开应用即可看效果

【react native】adb真机调试

坚强的泡沫的博客

03-19

594

安装完成后，关闭并重启终端，adb环境即可生效。

react-native-debugger

09-11

综合这些文件，我们可以看出"react-native-debugger"不仅依赖于JavaScript引擎V8，还依赖于一系列的图形库和编译器，以提供跨平台的高性能调试环境。它集成了关键的图形API和多媒体处理库，确保了在各种环境下都能...

React Native开发环境搭建

最新发布

m0_56344834的博客

11-02

2882

React是一个构建用户界面的JS框架，实现了数据的响应式和组件化开发，本身既可以用于Web网站项目，也可以用于创建移动端App项目。相较于Vue.js在移动端只能构建WebApp，React生态系统中有一个可以构建“真正原生App”的扩展 —— React Native，可以这样说：“RN是React生态圈可以傲视其它对手的绝对功臣”。

启动react-native项目时 node窗口闪退.docx

06-16

3. **环境差异对比**：如果在同一版本的React Native项目中，其他开发者的环境中没有出现此问题，可以通过对比不同环境之间的差异来查找原因。 4. **社区求助**：如果以上方法都无法解决问题，可以在React Native...

React Native 调试项目

圣人男的博客

03-21

273

一、打开调试1.iOS 平台摇动设备或者使用组合快捷键 control + command+z2.Android 平台中摇动设备或者使用组合快捷键 command+m3.打开 Chrome浏览器输入 http://localhost:8081/debugger-ui在Chrome浏览器中打开开发者工具或者使用快捷键 command+option+i...

使用VScode 插件debugger for chrome 调试react源码的方法

12-08

代码调试，是我们前端日常工作中不可或缺的能力了吧！在面向dom开发的时代，我们开发时直接在chrome里打断点是很方便的。但是，当我们面向组件开发时(react),浏览器拿到的是我们编译过后的代码，还想在浏览器里打断点几乎是不可能的了。场景那怎么办，方法总是比困难多！愚蠢的我想到了console/debugger！！一直在使用，虽然很不方便（打印太多实在太乱！上线还要配置删除掉），但是我竟然使用了很久（这真是一个糟糕的编码习惯吧）。直到今天，我想研究一下react源码，需要断点的地方有很多，不可能在手动console/debugger了！！我才想到我为什么不用浏览器debugger？

react开发调试插件与使用方法

10-31

react开发调试插件与使用方法，主要用与在浏览器中对react项目进行开发调试。使用 Chrome Devtools 进行调试时，可以查看应用程序的 React 组件分层结构，而不是更加神秘的浏览器 DOM 表示。添加react developer tools到chrome，是对chrome开发工具的React调试工具。

react-native-debugger：基于React Native官方调试器的独立应用程序，包括React Inspector Redux DevTools

02-03

React Native调试器使用Redux DevTools安装程序运行的redux示例这是一个用于调试React Native应用程序的独立应用程序：基于官方的并提供更多功能。包括。包括Redux DevTools，使用制作。包含（）作为devtools扩展。安装要安装该应用程序，您可以从下载预构建的二进制文件。对于macOS ，您可以使用进行安装： <自制软件2.6.0 $ brew update && brew cask install react-native-debugger > =自制软件2.6.0 $ brew install --cask react-native-debugger 这会将React Native Debugger.app放在/applications/文件夹中。注意：React Native兼容性要使用此应用程序，您需要确保使用的是React Native Debugger和react-native的正确版本： React Native调试器 React性的 > = 0.11 > = 0.62

像用 IDEA 调试 Java 代码一样调试 react 代码

万里浮云的专栏

04-08

1957

开发工具 IDE + Google Chrome + JetBrains IDE Support 插件传送门： https://www.jianshu.com/p/e9cd7adb1ea4

React-native在Windows下Android环境的安装调试

theVicTory的博客

04-11

493

在第一次使用react-native时，遇到的问题就是在运行react-native run-android时报错 FAILURE: Build failed with an exception. * What went wrong: Could not determine java version from '9.0.1'. 网上有些人说这是由于Android Studi...

react调试工具与调试方法

qq_36742720的博客

11-07

2660

react开发的调试方式借助以下插件进行调试。 Redux DevTools React Developer Tools React Perf F12 之后，在源代码处打断点。像用 IDEA 调试 Java 代码一样，用 WebStorm 调试 react 代码，直接在 WebStorm 源代码上打断点，调试起来有点象在 IDEA 下调试 Java 程序，很爽！ Redux DevTools 安装插件以 qq 浏览器为例，搜索：Redux DevTools 添加相应代..

信不信：IDEA 的 Debug 调试，你可能只用了 10%

Newernini的博客

02-14

1384

一、Debug开篇首先看下IDEA中Debug模式下的界面。如下是在IDEA中启动Debug模式，进入断点后的界面，我这里是Windows，可能和Mac的图标等会有些不一样。就简单说下图中标注的8个地方： 1、以Debug模式启动服务，左边的一个按钮则是以Run模式启动。在开发中，我一般会直接启动Debug模式，方便随时调试代码。 2、断点：在左边行号栏单击左键，或者快捷键Ctrl+F8 打上...

react-native 搭建windows开发环境及报错解决办法

wanglun_的博客

10-17

1988

选择需要下载的SDK Platforms / SDK Tools，先勾选右下角Show Package Details。找到android\build.gradle文件，在 repositories添加一下两段代码即可。低于 0.67 版本的 React Native 需要 JDK 1.8 版本（官方也称 8 版本）。找到android\build.gradle文件，在 repositories添加以下代码即可。SDK Tools 栏勾选 Android SDK Build-Tools 34。

Windows环境下搭建React Native开发环境

"这篇文档主要介绍了如何在Windows操作系统上搭建React Native开发环境，适用于想要进行Android平台开发的用户。" 在Windows上搭建React Native (RN) 环境需要完成一系列步骤，首先需要安装必要的软件和工具。以下...