本人是 vue 技术栈，并非 react 技术栈。只是临时有需求，所以周末临时研究了一下。写这篇文章进行分享的同时，也顺便给自己记个笔记。

2 两种脚手架

在官网的 环境搭建指导 上，我们可以看到有两种脚手架可供使用：

Expo CLI 是 Expo 框架的其中一个组件，用它来搭建的工程是基于 Expo 框架那一套生态的。React Native CLI 则是 React Native 原版的脚手架。用不同脚手架搭建出来的工程，由于使用的技术方案有所区别，所以在环境依赖、支持的能力、使用效果上也会有所差异。

2.1 进行一个简单的比较

2.2 关于调试设备

以安卓为例，我们在移动开发的过程中，IDE与安卓设备的对接是靠 adb 完成的，通过 adb 去做传输apk文件、发送操作命令、获取控制台打印输出等操作。

adb 连接方式主要有两种：usb 线直连、网络连接。在真机上调试的时候两种都可以选用，甚至两种可以同时结合使用，先直连再通过网络转发。而在虚拟机上调试的时候一般只能用第二种，所以我们选用安卓模拟器的时候需要确认它能支持暴露 adb 的网络服务。React Native 的对接方式也是这样。

而 Expo 这套框架，基于 React Native 进行了进一步封装，进行了能力增强，使得它具备了一些特殊的能力。

比如，可以在不依赖 adb 的情况下进行调试。

提供了一款名叫 Expo Go 的 app 作为宿主应用，让用户预先安装在手机上。用户使用 Expo Go 扫码或者输入URL的时候，会通过网络请求把我们的应用作为一个子应用加载过去。类比一下微信小程序就好理解了。当然，Expo Go 的这种玩法一般只用于开发阶段，实际上打包发布应用市场的时候不需要这么玩，可以打包成独立的apk包。

又比如，在网页上也能预览app效果调试。

基于 react-native-web 实现

2.3 总结一下两套方案的优劣

下面会分别使用这两种方式进行环境搭建

下文会使用缩写 RN 来表示 React Native。

3 使用 Expo CLI

首先，上 官方教程链接 。 过程还是比较傻瓜式的，如果没什么意外的话，按照官方文档去做就会很顺利。因不同电脑网络环境和 npm 源配置不同，如果下载依赖遇到了问题，更换合适的 npm 源自行解决即可。

如果没有 nodejs 环境，需要 下载 nodejs 进行安装。

全局安装 expo-cli：

npm install -g expo-cli
安装完成之后，nodejs 的相关目录下生成一个 expo.cmd、expo.sh 等脚本文件，我们就可以使用 expo 命令来调用 expo-cli 脚手架了。
创建新项目的时候，就用 expo-cli 脚手架来创建：
expo init AwesomeProject
进入目录之后。像一个普通的前端工程一样，用 npm 命令运行运行相关程序启动前端工程。
cd AwesomeProject
npm start
如果使用 windows 的 cmd 去运行这个命令的话，由于字体问题，出来的二维码会变成这个样子：
虽然直接复制那个链接 exp://192.168.31.38:19000 拿来使用也是可以的，但总规避问题也不妥。所以我这里找了个别的办法来正常打印二维码。
用 git bash 操作
winpty npm.cmd start # 不加 winpty 的话，二维码打印不出来
二维码可以正常展示。
现在应用已经构建完了，按照官方文档的指导，我们只需要在手机上，安装宿主应用 Expo Go，用 Expo Go 去扫码就可以加载这个工程编出来的应用了。
点击文档里面给的 Expo Go 下载连接，跳转到的是 Expo 的官网。这时候如果你习惯性地点击导航栏上面的 Tools -> Android Client，就会发现它跳转到了被墙掉的网站上。
网站被墙了，但开发总还是要开发的，于是一通找看看有没有什么别的途径能下载到这个软件：
在自己手机上的小米应用商店搜了一下，没有。
找了 Expo Go 所在的 github 链接，企图在上面找到编译好的发布包。可惜这个仓库并不提供发布包。
在 Expo 官网的这个页面找到了可以直接下载的 apk 包。点进去往下滚两三页就可以看到了。
这是 Expo Go 的主页面。
用它扫描完二维码后，应用可以正常被加载出来。
4 使用 React Native CLI
4.1 下载安装几个工具
准备好下面几个工具，已经装过的就不必再安装了
安装 下载 nodejs 。直接下载一路 next 安装即可。
下载 openjdk 18，解压到自己想要放置的目录中后配置环境变量。选择 openjdk 18 是因为这个版本的生命周期正处于 GA 状态，而 RN 官方给的 openjdk 11的链接已经被归类为历史版本了。
下载 android studio 进行安装。记得勾选一下安装虚拟设备的选项，其他直接一路next。
4.2 新建一台模拟器
使用 android studio 的虚拟设备功能，新建一台模拟器
4.3 配置 android sdk
官方文档上面有个步骤要求点开一些界面，勾选特定版本的 sdk 然后下载。这里因为把步骤顺序换了一下，已经不需要这个操作了，因为创建虚拟设备的时候相应版本的 sdk 会自动下载下来。
剩下的只有一个添加环境变量的操作：添加 ANDROID_HOME 环境变量，并把 %ANDROID_HOME%\platform-tools 添加到 Path 环境变量中。
4.4 创建工程
注意，如果之前有全局安装过 react-native-cli 这个 npm 包，需要先卸载掉。
npm uninstall -g react-native-cli
现在官方推荐的是直接用 npx 运行它，如果电脑上没有这个包，会自动下载最新版本。
npx react-native init AwesomeProject
4.5 运行方式1
启动 Metro 服务
npx react-native start
让 Metro 服务保持运行状态，开启另一个命令行窗口，同样切到 RN 工程目录下，执行下面这句命令。
npx react-native run-android
注意，这种运行方式不需要使用 android studio 打开工程，但要保证你的安卓模拟器是属于开机状态的。因为脚本尝试自动启动模拟器可能会遇到一些问题，导致连不上，为稳妥起见还是提前开起来。
4.6 运行方式2
启动 Metro服务
npx react-native start
用 android studio 打开 RN 工程里面的 android 子目录。这个目录实际为一个 android studio 工程，可以被 android studio 识别。
点击 android studio 右上角的运行按钮。
4.7 可能遇到的一些问题
安卓模拟器崩溃且无法再启动起来。遇到这种情况就删除掉这个虚拟设备重新创建一个，要不了几秒钟时间。
使用方式 1 运行 app 时，报错说找不到设备或模拟器。可以关闭 android studio、模拟器、命令行窗口或直接重启电脑，重新尝试运行项目。另外需要注意一下，如果是先启动 adb 服务再启动模拟器的话，adb 可能会查找不到模拟器，用下面的容器化方式尤其容易遇到这个问题。
使用方式 2 运行 app 时，遇到报错“Waiting for Target Device to Come Online”，解决方式同上。
使用方式 2 运行 app 时，遇到报错“Unable to load script.Make sure you are either running a Metro server or ......”，请参考这条stackoverflow 上面的回答。我这里是在 cmd 执行了 adb reverse tcp:8081 tcp:8081 之后就好了。
5 使用 React Native CLI（容器化）
5.1 方案评估
由于 React Native CLI 环境配置比较繁琐，并且还容易受各种版本不配套的影响，容易把 PC 上的环境弄乱。
面对这种复杂的环境配置，身为技术宅，理所应当联想到，是否可以把这套环境打包在docker容器里面呢？
毕竟容器的网络是可以连通宿主机（默认的bridge模式）甚至跟宿主机共享同一网络（host模式）的，那宿主机能连的安卓设备，无论是物理机和虚拟机，也都有连接的可行性。
官方是否会提供已经配置好的容器镜像或者 Dockerfile 脚本呢？官方仓库里面没找到，但找到了一个看起来靠谱的 社区项目。这个社区项目有提供写好的 Dockerfile，并且在 dockerhub 上面也已经上传了现成的镜像。
那么策略就清晰了，先拉取构建好的镜像试试能不能编出包，连到安卓设备上。如果以后有什么环境版本上面的特殊需求，再基于基于他们的 Dockerfile 进行修改，自己构建镜像。
那么，先考虑下如何在 windows 电脑上面使用 docker：
docker desktop
minikube
用虚拟机软件启动一个 linux 虚拟机，在虚拟机中安装 docker
购买 windows 专业版，在 WSL 中安装 docker/k8s 使用
这里选的是最后一种方案，理由：
WSL 和沙盒都是程序员常用的功能，家里的 windows 电脑为了使用这两个功能都已经买过专业版了。而 docker desktop 和 minikube 所使用的虚拟化技术可能跟 hyper-v 冲突。
WSL 和宿主系统默认就是共享电脑磁盘的，我们可以在宿主机的 IDE 中编辑代码，在 WSL 中编译，使用起来也会比较方便。
这里从 WSL 的安装开始，把完整步骤全部写出来。
5.2 安装配置 WSL
使用管理员身份运行cmd
wsl --install -d Ubuntu-20.04
等一段时间之后，需要的资源都下载完成，就可以启动 WSL 了
wsl -u root
直接使用 root 用户操作 linux 并不是一个好习惯。正常来说应该使用普通用户并做好权限限制。这里使用 root 用户操作，一方面是为了简化教程，另一方面是这里的 WSL 只作为一个开发环境，也不涉及下载什么危险软件，就不讲究这个了。
习惯上，使用 linux 系统之前，先换上一个靠谱的国内软件源
echo "
deb http://mirrors.aliyun.com/ubuntu/ focal main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ focal main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ focal-security main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ focal-security main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ focal-updates main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ focal-updates main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ focal-proposed main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ focal-proposed main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ focal-backports main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ focal-backports main restricted universe multiverse
" > /etc/apt/sources.list
改完配置文件后，需要执行一把更新，拉取软件源的最新列表
apt update
如果报错 DNS 无法解析阿里云的域名，就改一下 DNS 服务器地址。
# 每次重新进入 WSL，resolv.conf文件都会被覆盖写入，填成宿主机的ip
# 暂时没空定位是什么原因了，直接简单粗暴一点，让用户每次登录的时候都重新覆盖掉
# 下次重新进入 WSL 就不用执行这个操作了，会自动执行
echo "echo nameserver 223.5.5.5 > /etc/resolv.conf" >> /etc/profile
source /etc/profile
5.3 准备好 docker 容器
按照阿里云官网给的这个教程，安装docker-ce
apt update
apt -y install apt-transport-https ca-certificates curl software-properties-common
curl -fsSL https://mirrors.aliyun.com/docker-ce/linux/ubuntu/gpg | sudo apt-key add -
add-apt-repository "deb [arch=amd64] https://mirrors.aliyun.com/docker-ce/linux/ubuntu $(lsb_release -cs) stable"
apt -y update
apt -y install docker-ce
启动 docker 服务
# 下次重新进入 WSL 就不用执行这个操作了，会自动执行
# 由于在 WSL 中用不了systemd 所以只能用这种方式来实现 docker 自启
# 这同样是个不太优雅的做法，因为 WSL 未关机的情况下重复登录进来会导致命令被重复执行。
# 但重复执行 start 命令不会重复拉起docker服务，对我们的使用没有什么影响，凑合用吧
echo "service docker start" >> /etc/profile
source /etc/profile
docker pull reactnativecommunity/react-native-android
由于 dockerhub 是国外网站，所以速度较慢，近 3 个 G 的内容下载起来需要一定时间。所以也可以可以使用加速地址，从国内的 docker 源下载。但如果这么做，之后操作镜像的时候，镜像名称就要记得加上前缀。以下面的命令为例，镜像名称会变成 hub-mirror.c.163.com/reactnativecommunity/react-native-android。
# 用这种方式拉取镜像也可以
docker pull hub-mirror.c.163.com/reactnativecommunity/react-native-android
# 先在D盘创建一个目录，后面的RN工程都防止这里，windows 宿主机、WSL、容器三者都可以共享这个目录
mkdir /mnt/d/rn-projects
docker run -itd --name rn-container --network host -v /mnt/d/rn-projects:/root/rn-projects reactnativecommunity/react-native-android /bin/bash
5.4 尝试创建一个工程运行
docker exec -it rn-container bash
# 后面的环节会有查看 ip 的环节，并可能面临检查网络连通性的需求。安装这两个软件是为了使用 ifconfig 和 ping 命令。
apt update
apt install net-tools iputils-ping 
cd /root/rn-projects
npx react-native init AwesomeProject
cd AwesomeProject
npx react-native run-android
报错说连不上模拟器。因为此时电脑上面没有装任何安卓模拟器，也没对接任何真机：
error Failed to launch emulator. Reason: No emulators found as an output of `emulator -list-avds`.
warn Please launch an emulator manually or connect a device. Otherwise app may fail to launch.
现在可以关闭命令行窗口接着下面的步骤了。
5.5 安装模拟器
安装模拟器也有多种方案可以选择：
使用 WSA（Windows Subsystem for Android）
安装 android studio 使用它自带的模拟器
安装一个网上常见的安卓模拟器（平时主要用来打游戏的那种 xx 模拟器）
选择方案2，因为 WSA 目前尚未成熟，也无法很方便地在 windows 商店下载安装，而另外下载一款模拟器又嫌多此一举，毕竟 android studio 后面可能还会用到，而且支持的系统版本和机型也更多一些。
首先就是下载 android studio 进行安装。安装步骤就比较简单了，直接一路next。记得勾选一下安装虚拟设备的选项就行。
完成之后桌面图标启动 android studio。启动之后不要创建任何工程，因为我们这样子搭环境的话，不需要android studio来管理我们的工程，只需要它的模拟器即可。
剩下的配置步骤，跟上面的 4.2 章节一模一样，就不重复贴图了。
由于需要在宿主机使用 adb 命令，为了方便使用，我们把 android sdk 给配到环境变量里面，这样我们就可以使用它带有的 adb.exe 了。
添加一个环境变量叫做 ANDROID_HOME，值设置为：%LOCALAPPDATA%\Android\Sdk
在Path环境变量里面添加一个路径，值设置为：%ANDROID_HOME%\platform-tools
5.6 对接 docker 容器和安卓模拟器
将容器中的 adb 服务与物理机的模拟器对接上。
查询一下自己宿主机的ip
ipconfig
我这里查到我宿主机的 ip 是 192.168.31.103。
使用管理员权限运行 cmd，配置一个端口转发，把 WSL 的 adb 会话转发到宿主机的 127.0.0.1:5555 上面。
# 转发配置
netsh interface portproxy add v4tov4 listenport=5555 listenaddress=192.168.31.103 connectport=5555 connectaddress=127.0.0.1
# 如果不需要这个配置了，可以用这个命令删除
# netsh interface portproxy delete v4tov4 listenport=5555 listenaddress=192.168.31.103
配置完成之后要把防火墙关掉或者放行 5555 端口，否则无法在容器中连接 windows 宿主机的 5555。
wsl -u root
service docker start
docker start rn-container
docker exec -it rn-container bash
在容器中调用 adb 进行连接宿主机模拟器。
adb connect 192.168.31.103:5555 # 提示 connected to 192.168.31.103:5555 即为连接成功
adb devices # 显示 192.168.31.103:5555     device 即为连接成功
在容器中启动 Metro 服务（这个窗口持续开着不要关掉，这里称为 1 号窗口）。
cd /root/rn-projects/AwesomeProject
npx react-native start --port 1234
另起一个窗口（这里称为 2 号窗口），在容器中调用模拟器启动 app。
npx react-native run android
此时在模拟器中必定会有红色报错，页面无法正常加载。需要调出开发者菜单，调一个东西。
两种调出方式：
鼠标点一下模拟器屏幕，按下 crtl + m 组合键。
在 2 号窗口中，使用 adb shell input keyevent 82 命令，控制手机调出菜单。
点击 settings -> Debug server host & port for device
输入 <容器ip>:1234
在 2 号窗口中重新调用一次 npx react-native run android，模拟器就能正确加载出应用了。
6 参考资料
React Native 官网
React Native Init vs Expo 2022: What Are the Differences?
stackoverflow.com/questions/5…




    

【React Native开发】React Native应用设备运行(Running)以及调试(Debugging)(3)
  
分类：
 前端
 
 
   
相关推荐
 
  
       
13小时前
 

      
 
   CSS小技巧之悬停3D发光效果
 
今天要实现的效果如图所示，核心CSS代码不到10行，仅一个img元素无伪元素，鼠标悬停是图片卡片会有3D翻转的效果，且动画过程中还带有发光的效果。
 
 348
 
 
        _你当像鸟飞往你的山
      
 
13小时前
 

      
 
   一个”哇噻“程序员的新 Mac 必备配置清单 ~
 
一个”哇噻“程序员的新 Mac 必备配置清单，手把手教学，将你的mac打造成漂亮、高效的生产力工具~
 
 327
 
 
        小余的自习室
      
 
18小时前
 

      
 
   DES算法CFB OFB模式介绍
 
综合了几篇文章的内容，以C#的计算结果为参考标准，总结出CFB模式的流程(OFB模式先占坑，未来再填) CFB模式 密文反馈（CFB，Cipher feedback）模式与ECB和CBC模式只能够加密
 
 124
 
 
        猪头切图仔
      
 
17小时前
 

        JavaScript
        React.js
      
 
   React源码系列（七）------ useEffect
 
本文通过Demo组件例子讲述effect hooks的执行顺序，再通过Demo组件和部分简化过的源码讲述effect hooks都做了些什么并且引出真正的主角updateQueue。
 
 304
 
 
        Jeffrey0211
      
 
18小时前
 

        JavaScript
      




    
 
   构造函数和原型链相关
 
为什么函数是一等公民，或者说它有何特殊之处?构造函数和原型链是什么，二者有什么关系？构造函数中为什么会有prototype?
 
 277
 
 
      
 
19小时前
 

        JavaScript
        uni-app
      
 
   ⚡某东图片滑动效果：滑块跟随图片的滑动而位移
 
某东APP的图片滑动效果， 滑块跟随图片的滑动而位移。文章内容不多，感兴趣的小伙伴可以进来瞅瞅，多学个小知识。文章用srcoll-view和js实现的。
 
 245
 
 
      
 
18小时前
 

        Element
      
 
   【源码学习】第28期 | 如何实现一键返回顶部？
 
前言     当开发页面内容较多，如介绍官网产品之类【只有一个产品的当我没说~】的，应该有不少童鞋都碰到过一键回到顶部的需求，那么一键回到顶部具体是怎么实现的呢？今天就一起来看一下element-pl
 
 230
 
 
      
 
15小时前
 

        Webpack
        Vue.js
      
 
   webpack学习之webpack手动构建vue2项目
 
发现最近不论看什么平台发现都在给我推前端找工作之类的文章，基本都是找工作多久多久仍然在找工作，搞得我也有点紧迫感，既然气氛都到这个地步了，那就也找找工作吧，于是打开找工作的软件开始未雨绸缪。结果一看才
 
 303
 
 
        _island
      
 
15小时前
 

        JavaScript
        Vue.js
      
 
   请收好这些日常必备的代码片段，让您码得更快！
 
分享了一些代码片段，帮助提高工作效率。通过本文，您将了解如何使用这些代码来简化编程任务，并减少编写重复代码所需的时间，并能帮助您更快地完成任务需求
 
 226
 





    
 
        子辰Web草庐
      
 
17小时前
 

      
 
   令人惊叹的文字交融效果，只需几行 CSS 代码就能实现！
 
这个案例代表了国内CSS技能最高水平，这样的一个文字交融效果，你能否一眼看穿他的原理呢？ 我是渡一子辰老师，接下来让我来带你分析文字交融效果的实现原理
 
 316
 
 
        老骥farmer
        JavaScript
        Vue.js
      
 
   因为一个写法，我翻烂了vue源码，这是vue的问题吧，我要不要提pr！
 
问题背景 我已经老了。。。。 面对现在的观众不知该如何表达。既然这样的话 那...... 直接上代码吧： 事情就发在昨天，在我们单位的办公大厅里，有一个产品向我走来。他主动介绍自己，他对我说，“老骥：
 
 4850
 
 
        不加糖435
      
 
19小时前
 

        three.js
      
 
   Threejs与物理引擎
 
我们都知道苹果从树上脱落后会掉下来而不是飘在空中是因为万有引力，苹果掉下来不会在地面上无限滚动，因为有摩擦。如果掉下来的是个乒乓球，大概还会弹上几下，但如果是掉在苹果地里，也可能弹不起来，因为地面的材
 
 137
 
 
        duious
      
 
18小时前
 

        axios
      
 
   请求的并发控制，变为串行
 
封装axios，实现串行发送请求🫠；以支持每个请求携带唯一Token，而且Token也是通过接口返回的
 
 138
 
 
        Sli97
      
 
   接口数据体积压缩之二进制编码
 
二进制编码是什么？数据在底层的传输不都是二进制流吗？ 二进制编码具体要怎么做呢？ 二进制编码很好吗？那为什么Web领域没有广泛地在前后端通信使用呢？
 
 153
 
 
        tangdou369098655
        Node.js
      
 
   前端怎么使用node-input-validator给接口添加参数校验（以strapi 4.9为例）
 
node-input-validator是什么？ 简称NIV (Node Input Validator) 用于node.js的验证库 使用它可以扩展库以添加自定义规则。 npm NIV文档 使用方法
 
 153
 
 
    hqZing