使用expo在安卓模拟器中运行React Native程序

本文涉及的产品
阿里云百炼推荐规格 ADB PostgreSQL,4核16GB 100GB 1个月
简介: 看完这篇教程你会学到如何在安卓模拟器里运行一个React Native程序。我的电脑及软件环境系统: windows10 64Node:8.5.0然后安装下面的工具,不分先后。

看完这篇教程你会学到如何在安卓模拟器里运行一个React Native程序。

我的电脑及软件环境
系统: windows10 64
Node:8.5.0
然后安装下面的工具,不分先后。

首先说下 create-react-native-app
npm install -g create-react-native-app
并按照教程 尝试启动,执行完执行npm start会出现个二维码,让我们在手机里安装expo,扫一扫就可以打开react native应用。注意要处在同一网络。经常会出现timeout。

Android Studio 3.0 (注意这个不是必须的,我主要是用他来安装android sdk)
这个安装过程会比较慢,而且加上sdk等大约会占2G的空间。按照网站的视频安装就行,安装完就可以启动一个安卓程序了。

img_a51283e5395b570e9864ab472dafede3.png
image.png

注意sdk的安装路径,我们要保证命令行可以直接运行adb。
我是在环境变量里添加了C:\Users\{替换成你的计算机名}\AppData\Local\Android\Sdk\platform-tools

genymotion
这个需要注册帐号,然后按照expo的推荐,安装安卓虚拟设备,可以是Nexus5。

安装 expo XDE
简单说expo是一个工具,可以运行react native,并且在genymotion模拟器里打开,提供live reload等功能,还可以发布你的程序。类似开发微信小程序那个工具。
具体文档
实测发现不太稳定。可能会受到不同的电脑环境和环境变量的影响。
这里要注意一点ADB的配置

img_7d76fed811a6b5ac9ac0e9de3d6f7f82.png
image.png

大致流程:

  1. create-react-native-app 创建一个项目,比如名叫RN_First

    img_5ddb7c7769e183cc72cc32b7dc168420.png
    image.png

  2. 用Expo XDE打开这个项目并运行
    运行后界面如下,


    img_5f2e23e770367c4090e497d8ad788e1b.png
    image.png
  3. 打开Genymotion并运行安卓模拟器

img_c589e3604ec7db130f3947c03b05c844.png
image.png
  1. 然后在expo里选择Device-Open on Android,成功的话可以在安卓模拟器看到启动expo并打开了我们的RN项目

如果修改代码,比如App.js,会立即发生变化。


img_ff4ff70a9e6ccfd435fa44efcbadaf43.png
image.png
img_bc00fe4ee1c6586614c60c63b640af7a.png
image.png

遇到的坑:

ADB server didn't ACK, failed to start daemon

答: 发现adb的环境变量设的不对,之前装过安卓sdk造成有两个adb。expo找的是老的adb。
参考

Error running adb: Error running app. Error: Activity not started, unable to resolve Intent { act=android.intent.action.VIEW dat=exp://192.168.0.100:19000 flg=0x10000000 }

答: 检查adb配置,最后重装expo解决。

原谅我用了粗话,因为第一次接触,走了不少弯路。

关于模拟器里调试:

ios里按cmd+R,对于安卓,点击菜单按钮


img_4b84482ac98b98811b84885c56735b77.png
image.png

总结:

  1. 最好用mac开发react native,毕竟这个工具的开发者很多都用的MBP,坑会少一些。
  2. 工具尽量从官方下载,不要胡乱从第三方网站下载
  3. 开发前建议多看几遍 expo 文档。清楚你每步的操作是什么。

相关工具官方下载地址:
Android Studio
genymotion

相关实践学习
AnalyticDB PostgreSQL 企业智能数据中台:一站式管理数据服务资产
企业在数据仓库之上可构建丰富的数据服务用以支持数据应用及业务场景;ADB PG推出全新企业智能数据平台,用以帮助用户一站式的管理企业数据服务资产,包括创建, 管理,探索, 监控等; 助力企业在现有平台之上快速构建起数据服务资产体系
相关文章
|
3月前
|
存储 消息中间件 人工智能
【03】AI辅助编程完整的安卓二次商业实战-本地构建运行并且调试-二次开发改注册登陆按钮颜色以及整体资源结构熟悉-优雅草伊凡
【03】AI辅助编程完整的安卓二次商业实战-本地构建运行并且调试-二次开发改注册登陆按钮颜色以及整体资源结构熟悉-优雅草伊凡
127 3
|
3月前
|
存储 API Android开发
【02】完整的安卓二次商业实战-配置gradle-构建打包原生安卓项目-调试本地运行模拟器-优雅草伊凡
【02】完整的安卓二次商业实战-配置gradle-构建打包原生安卓项目-调试本地运行模拟器-优雅草伊凡
193 4
【02】完整的安卓二次商业实战-配置gradle-构建打包原生安卓项目-调试本地运行模拟器-优雅草伊凡
|
5月前
|
存储 Android开发 数据安全/隐私保护
Thanox安卓系统增加工具下载,管理、阻止、限制后台每个APP运行情况
Thanox是一款Android系统管理工具,专注于权限、后台启动及运行管理。支持应用冻结、系统优化、UI自定义和模块管理,基于Xposed框架开发,安全可靠且开源免费,兼容Android 6.0及以上版本。
462 4
|
8月前
|
缓存 Android开发 开发者
Flutter环境配置完成后,如何在Android设备上运行Flutter应用程序?
Flutter环境配置完成后,如何在Android设备上运行Flutter应用程序?
1354 62
|
8月前
|
开发工具 Android开发 开发者
在Android设备上运行Flutter应用程序时,如果遇到设备未授权的问题该如何解决?
在Android设备上运行Flutter应用程序时,如果遇到设备未授权的问题该如何解决?
472 61
|
算法 数据处理 Android开发
掌握安卓性能优化的秘诀:电池寿命与运行效率的提升
【10月更文挑战第6天】 本文深入探讨了安卓应用开发中的性能优化技巧,重点分析了影响电池寿命和运行效率的关键因素,并提供了针对性的优化策略。通过代码优化、资源管理、后台任务处理等方法,开发者可以显著提升应用的续航能力和流畅度。同时,结合具体案例,展示了如何在实际开发中应用这些技巧,确保应用在各种场景下都能保持高效运行。本文旨在为安卓开发者提供实用的性能优化指导,助力其打造更优质的应用体验。
370 2
|
10月前
|
前端开发 Java 编译器
当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
292 36
当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
|
10月前
|
缓存 Java 测试技术
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
1235 3
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
|
JavaScript 前端开发 应用服务中间件
本地运行打包好的React、Vue项目
本文讨论了如何本地运行打包好的React和Vue项目,并解决了使用React-Router时Tomcat部署刷新页面导致404的问题,提出了将请求转回index.html的解决方案。
388 1
本地运行打包好的React、Vue项目
|
网络协议 Shell 网络安全
解决两个 Android 模拟器之间无法网络通信的问题
让同一个 PC 上运行的两个 Android 模拟器之间能相互通信,出(qiong)差(ren)的智慧。
245 3