【腾讯青科】Expo go + RN 跨端环境配置及调试

又是熟悉的背景介绍，最近在参加腾讯青科实训营大前端营，结课要求是做一个原生或者跨端的应用，作为一个前端社畜预备役肯定是选跨端啊，但是之前从未做过的web前端以外的开发，所以记录一下环境配置时小白可能遇到的问题供来者参考，也方便以后复盘。

技术栈选型

这里我对几种跨端方案做了一个简单的调研，跨端方案很多，各有特点，总结如下：

框架	React Native	Weex	Flutter
所属公司	Facebook	Alibaba	Google
编程语言	JS	JS	Dart
引擎	JSCore	V8	Flutter engine
支持系统	Andriod、iOS	Andriod、iOS、Web	Andriod、iOS、Fuchsia
性能	一般	较快	较快
适用场景	整体App	单页面	整体App
学习成本	难	易	一般

由于本人现在很穷，所以只能利用手头的设备开发调试，真希望我能get一个签字费，然后去买个开发机（丐版的也行啊）。为什么这么强调这个呢，因为我的笔记本是3年前购入的一台dell xps13，搭载操作系统win11，手机是pdd百亿补贴购入的iphone15。网上的意思大概就是说如果用windows开发的话不可以本地编译ipa

但是穷有穷的活法，废话少说，介绍一下本人的调试环境：

windows11
iPhone15 iOS 18.5

环境准备

Node环境

首先node和npm就不说了，我这边用nvm管理node版本的，感兴趣可以去搞一个，切换版本蛮方便的：nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions。

用下面命令看一下版本：

1 2	node -v npm -v

小女子这边的版本是这俩：

1 2	18.20.8 10.2.4

有些情况下会出现node版本不对导致的兼容性问题不过似乎目前node18的表现还可以，先用着，有问题再说，反正只是个demo.

Expo

这个CLI是一个用来在手机上方便地debug的一个脚手架。

安装：

1	npm install --global expo-cli

手机上也要装一个Expo Go(App Store里就有).

然后就可以愉快地创建项目惹！

1 2	npx create-expo-app calendar-app cd calendar-app

里面少了什么包会自动提示安装，只需要check就行，完成后这样：

然后进入目录，启动开发环境：

1	npx expo start

怎么在iOS真机上看效果

然后你就会看到这样，你就可以用你的pdd iPhone扫码了，但是你需要确保模式是Expo Go而不是什么其他的模式。

还要注意你的手机和电脑应当处于同一局域网下，因为Expo Go有多种连接模式：

模式	名称	要求	原理	优点	缺点
LAN（默认模式）	本地局域网连接	手机和PC必须在同一个 WiFi 下，且彼此可互相访问	Expo Go 直接请求 `http://电脑IP:8081` 下载 JS	速度快开发顺畅	很多情况下 WiFi 会隔离设备导致失败
Tunnel（推荐）	通过 Expo 服务器中转	不需要同网	你的手机不直接连电脑，而是通过 Expo 服务器转发请求	最不会出问题	速度稍慢
Local（完全本地）	只允许 localhost	手机无法访问	只有电脑模拟器可用	几乎没用

如果你扫码之后无反应大概率是因为网络不对，反正我换成Tunnel就可以了：

1	npx expo start --tunnel

然后这样扫码的话也不需要在同局域网了，因为走中转服务器。

然后顺利的话就是你可以在你的手机上看到这一幕：

然后可以简单尝试一下热更新，速度还是挺快的，最直观的就是改一下文字，然后保存。我暂时还没找到什么特别好的可以用来衡量热更新完成的标志，只能躁候。

怎么使用mumu模拟器实现在电脑上使用andriod模拟器

andriod studio本身也提供了andriod模拟器调试的能力，但是体量过于臃肿，所以如果想用vscode，或者其他的开发ide，可以尝试这么去连接网易的mumu模拟器，不占太多的性能，而且可以比较方便地调试。

下载adb安卓调试桥： dl.google.com/android/repository/platform-tools-latest-windows.zip

下载解压后需要把adb.exe上一级目录的路径存到系统环境变量，然后重启终端才会生效。

在ADB有提供连接模拟器的命令。模拟器只有在连接之后才会在adb devices的列表中显示。需要两个参数模拟器ip地址和ADB调试端口

1 2	adb connect <device-ip-address>:<port> # 如127.0.0.1:16416

可以在问题诊断里看到ADB的调试接口，链接之后，用下列命令可以查看链接情况，开始调试：

C:\Users\20991>adb connect 127.0.0.1:16416
connected to 127.0.0.1:16416

C:\Users\20991>adb devices
List of devices attached
127.0.0.1:16416 device
emulator-5556   device

然后启动expo go项目然后按a就可以把应用装载到andriod模拟器。