React-native 搭建开发环境指导【5】-------编译并运行

最新推荐文章于 2024-08-13 08:04:55 发布
最新推荐文章于 2024-08-13 08:04:55 发布
阅读量559 收藏
点赞数 1
分类专栏： React-native 文章标签： react native Android Studio
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42184799/article/details/85264774
版权

这个环节是出问题最多的地方。操作很简单，遇到问题也不要慌。都能解决。
在所创建的项目路径下，打开cmd窗口。输入命令行

react-native start

这一步是在打开packager，也可以在Android Studio 自带的Terminal窗口运行命令。
在这里插入图片描述

可以用浏览器访问
http://localhost:8081/index.bundle?platform=android
8081 是默认端口，如果该端口已经被其他程序占用，你就需要切换其他端口了。

看看是否可以看到打包后的脚本（看到很长的js代码就对了）。第一次访问通常需要十几秒，并且在packager的命令行可以看到形如[====]的进度条。
在这里插入图片描述
packager可以在后续，帮你展现你编译运行的情况。如下图
在这里插入图片描述

开启packager以后，可以运行你的项目了。打开另一个cmd窗口，输入下面的命令

最低0.47元/天 解锁文章
shijiahang
关注
专栏目录
React-Native工程项目打包编译发布过程详解
天外野草技术专栏
01-03 1万+
前言现在大红大紫的React-Native框架热度可谓与日俱增，React-Native的热更新操作，在开发过程中的确带来很多好处，但是对于发布来讲，不同平台却不尽相同， 下面来具体看一下Android和IOS两个平台是如何执行发布产品的。React-Native之Android平台发布Android平台有两种发布方式，一种是借助于命令行操作，另外一种是借助于Android Studio进行发布，具
搭建React-Native开发环境及运行第一个RN，APP项目
小梁的旅程
05-11 1454
搭建React-Native开发环境 此篇文章借鉴React Native中文网，偶尔这个网站会无法访问，因此，本人参照此制作一套教程，方便以后搭建环境等。 网址：https://reactnative.cn/ 如有侵权联系作者删除。 一、安装依赖 必须安装的依赖有：Node、Python2、JDK 和 Android Studio。 前三者可以理解为环境。 虽然可以使用任何编辑器来开发应用（编写 js 代码） 但必须安装 Android Studio的目的是： 来获得编译 Android 应用所需的工具和
开源项目推荐：遗留Rocket.Chat安卓原生应用
最新发布
gitblog_00483的博客
08-13 846
开源项目推荐：遗留Rocket.Chat安卓原生应用 Rocket.Chat.AndroidLegacy mobile Rocket.Chat client in Kotlin for Android项目地址:https://gitcode.com/gh_mirrors/ro/Rocket.Chat.Android Rocket.Chat，作为一款强大的开源聊天解决方案，其安卓原生应用虽然已进入...
超详细Windows版本编译运行React Native官方实例UIExplorer项目(多图慎入)
热门推荐
江清清的专栏
02-14 1万+
(一)前言         特别说明:群里很多童鞋都在说想Windows系统官方实例，但是官方提供的文档以及网上的例子都是OS X版本。今天特意给大家更新一下Windows版本运行官方 实例(UIExporler)全过程。俗话说学习一样新东西的时候，例如这边我们要学React Native的组件使用，那么最好的学习资料就是官方提供的材料了，作作为开发人员最好的学习资料就是源码，幸好官方给我们提供了
1ReactNative IOS 编译运行
zb313982521的博客
03-31 384
ReactNative IOS 编译运行打包目录 零、开场白 一、生成bundle文件 新建bundle目录 进入项目目录 二、在Xcode中集成 Xcode打开项目 引入离线包 设置AppDelegate.m文件 修改debug状态 三、异常处理 ==编译报错，提示“'React/RCTBundleURLProvider.h' file
React Native运行
whuzjn的专栏
03-24 3679
1、创建/拷贝项目 在cmd控制台（Workspace目录）使用命令react-native init AwesomeProject创建名称为【AwesomeProject】的项目 如果引入的项目是从其他地方拷贝过来的，可能需要安装RN的依赖包，执行命令如下： cd AwesomeProject npm install 2、开启服务 在cmd控制台（项目目录）启动RN服务，执行命...
源代码编译React Native
09-13 631
官方参考文档： https://reactnative.cn/docs/0.46/android-building-from-source/ clean与build 问题 https://www.jianshu.com/p/fbd29a9799ee    注意： 最后一步Android Studio 导入的时候一定注意导入的是 RN项目下的android ，不是 node-module下面的...
react-native-template-exemplo:示例React Native模板仓库
05-01
模板在开发环境中扮演着重要角色，它们提供了预设的项目结构、配置和代码，以便开发者无需从零开始搭建项目。"react-native-template-exemplo"很可能是为了教学或演示目的，帮助初学者了解如何设置一个基础的React ...
react-native移动端开发笔记1
08-08
React Native 是一个由...通过以上步骤，你已经成功地搭建了React Native的开发环境并创建了第一个项目。接下来，深入学习React Native的API和最佳实践，不断实践和探索，你将能熟练地构建出高质量的原生移动应用。
React-Native环境搭建：Android真机调试（小米手机miui10系统）
wudith的专栏
01-21 1100
主要参考官网的步骤来进行安装，但官网介绍的和最新版本的RN还是有一些差异，总结了一些自己的心得体会。
React-Native官方demo(对应 最新v0.55.0版本20180620编译)
06-20
2018年6月20最新编译React-Native官方demo,可直接运行版本。对应执行如下命令： 1.D:\reactnative\RNTester> react-native bundle --platform android --dev false --entry-file js/RNTesterApp.android.js --bundle-output android/app/src/main/assets/RNTesterApp.android.bundle --assets-dest android/app/src/main/res/ 2.D:\reactnative\RNTester\android>gradlew :app:installDebug
React-Native
03-20
1. **环境配置**：安装Node.js，设置React-Native CLI（命令行工具），以及配置iOS和Android的开发环境。 2. **创建项目**：使用`react-native init`命令创建新项目，生成基础项目结构。 3. **编写代码**：在项目...
React Native_环境编译
nxlnxl1204的博客
12-17 423
官方环境搭建 一、两种方式运行程序 1、指令运行：react-native run-android。运行结果如下图 通过指令运行结果二：直接通过android studio运行 二、遇到的问题 1、unable to load script.make sure you're either running a metro server。如下图所示。 标题异常图像a：通过指令启动时没有...
React Native 编译命令
bingdongguke的专栏
07-20 3712
编译命令 运行 server react-native start 或者 npm start运行 客户端 react-native run-android 安装模块,添加依赖 npm install react-native-swiper –save查看模块 npm view react-native-swiper删除模块 npm rm react-native-swiper创
react-native 初次编译遇到的问题
彪彪小站
11-06 495
1.安装npm 2.nodejs 也可以和上面的一起安装。 3. 安装 npm install -g react-native-cli 自己是下载别人的代码: a. npm install b. react-native run-android (编译并测试android app) 中间遇到很多什么connect reset, 什么包找不到，建议换淘宝源，或者科学上网。
一、React Native 环境搭建
SpringWaterLikeMe
11-06 2253
一、React Native 环境搭建 Mac OS With IOS 环境搭建 Node & Watchman# Brew配置镜像源https://segmentfault.com/a/1190000037670483 brew install node brew install watchman Yarn# npm install -g yarn Watchman# 参照Watchman 的安装说明来从源码来编译和安装 Watchman。 Watchman是由 Facebook 提供的监视文件
react-native开发环境搭建
jaywen1989的博客
09-10 213
1. 安装 Android Studio 首先下载和安装 Android Studio，国内用户可能无法打开官方链接，请自行使用搜索引擎搜索可用的下载链接。安装界面中选择"Custom"选项，确保选中了以下几项： Android SDK Android SDK Platform Performance (Intel ® HAXM)(AMD 处理器看这里) Android Virtual...
android rn源码编译,源码编译React Native 踩过的坑
weixin_42365065的博客
05-26 537
遇到的错误：Gradle sync failed: Could not get unknown property 'repositoryUrl' for project ':ReactAndroid' of type org.gradle.api.Project. Consult IDE log for more details (Help | Show Log) (1s 199ms)错误日志：C...
MacOS上快速搭建React-Native跨平台开发环境指南
- 开发者可以在Mac上编写单一的JavaScript代码，并在React Native环境中运行，这些代码会被编译成针对iOS和Android的原生组件。这极大地提高了开发效率，减少了为不同平台编写重复代码的工作量。 4. **问题排查** ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值