用expo开发react native实在是太爽了

expo出来已经有一段时间了，发现相关的文章还是比较少的。如果你在开发react native，那么我推荐你赶快使用expo来开发把！

一、零配置开发，降低开发者的心智负担。如果你之前开发过react native，那么你肯定会遇到要配置java，sdk等一大堆东西，并且版本还要对应上，否则开发不了。甚至说新手也会被这些东西劝退。使用expo后，无需配置这些开发环境，像开发web一样流畅的开发react native。

二、实时真机调试。以前开发react native，要打包后才能真机调试，并且ios的打包要审核，审核要花很长的时间，导致Android和ios之间兼容性的问题不能实时的查看，大大降低了开发效率。使用了expo之后，能够进行实时的真机调试。

三、云打包，一键推送到谷歌应用市场和Apple store。

#一、安装依赖

node 20 环境，首先安装全局脚手架

复制npm i -g  eas-cli expo-cli

expo-cli用于开发，eas-cli用于推送云打包。

#二、手机下载Expo go

安卓手机可以到谷歌市场下载Expo go，但是不知道为什么，下载的速度太慢了。所以我这里提供网页端下载。 expo.dev/go 选择最新版下载安装就行了

#三、创建项目

复制npx create-expo-app app

#四、启动项目

复制npm run start

会出现一个二维码

#五、真机调试

拿出手机，打开Expo go，使用Scan QR code扫二维码，即可看到效果

效果:

修改一下代码后，按R reload一下

效果：

app开发就这么简单。

#六、云打包app

先到expo官网注册一下账号，expo.dev/ ，然后本地登录expo账号，输入：

复制eas login

登录后，输入以下代码，让其自动生成eas.json配置文件。

复制eas build --platform android

全选是就行了，没讲究

会把当前的项目上传到expo，并且打包。终端显示Build in progress时，就说明正在排队打包。这里会等待很久，少则20分钟，多则两小时。此时就可以把终端关闭了，并且到expo的官网面板中查看项目

第一次是生成AAB文件，不是我们想要的apk文件，此时我们要改造一下eas.json文件，加入一段

复制        "release": {
            "android": {
                "buildType": "apk"
            }
        }

然后重新打包一次

复制eas build --platform android --profile release

因为要排队打包，快则20分钟，慢则2个小时。大家慢慢等待即可。

打包好后，下载安装即可。

#七、本地打包app

首先云打包太慢了，并且代码上传也不安全。那么怎么实现本地打包呢？

很遗憾，目前仅支持MacOS和Linux进行本地打包，windows暂不支持。折中的方案是windows用WSL下载Linux子系统进行打包。我这里提供另一种方法，是用docker进行打包

在项目中添加一个dockerfile.build用于打包

复制FROM shouyeren/expo-java:17

WORKDIR /WWW/APP/

ADD ./ /WWW/APP/

再写一个docker-compose.yaml进行自动化构建

复制version: '3'
name: build
services:
    build:
        build:
            context: .
            dockerfile: dockerfile.build
        image: build
        container_name: app
        tty: true
        stdin_open: true
        volumes:
            - ./:/WWW/APP/

整体的结构

运行命令

复制docker-compose up -d

运行起来后，进入到容器内部，并且在Exec窗口

手动执行命令，输入expo的账号密码，即可开始打包

复制eas build --platform android --profile release --local

打包失败：

试着开一下vpn重新执行命令，因为能不能打包成功和网络有关，所以只能多试几次了。

最后成功了，拿去安装就可以了。

当然最好的方案还是配好java，sdk等环境用macOS来打包。

#注：旧项目改造起来有点复杂，我没有成功，这里就不试了，你们自己研究一下。我这里演示的是用最新的react native开始改造

#搭建项目

复制npx react-native@latest init test

然后安装expo

复制npm i expo -D

然后照着expo项目改就行了，把babel.config.js中的内容改成以下

复制module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['module:@react-native/babel-preset', 'babel-preset-expo'],
  };
};

把index.js中的appName改成'main'。【本地打包的时候，记得改回来】

package.json中添加一个expo的脚本

复制   "expo": "expo start",

然后启动即可

复制npm run expo

改造成功

效果：

#旧项目改造失败怎么办？

旧项目改造会有很多环境的问题，我没有弄过，所以只能靠你们自己去研究。同时我也对旧项目用expo改造毫无兴趣，简直是浪费时间，所以最好还是开新项目的时候就用。