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

expo的好处是什么？

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

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

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

开始

一、安装依赖

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

shell 复制代码

npm i -g  eas-cli expo-cli

expo-cli用于开发，eas-cli用于推动打包

二、手机下载Expo go

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

三、创建项目

shell 复制代码

npx create-expo-app app

四、启动项目

arduino 复制代码

npm run start

会出现一个二维码

五、真机调试

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

修改一下代码，按r reload一下

app开发就这么简单。

六、云打包app

先到expo官网注册一下账号，expo.dev/ ，然后到项目下进行登录。

eas login

先上传一遍，让其自动生成eas.json配置文件。

css 复制代码

eas build --platform android

全选是就行了，没讲究

当它出现in progress时，就说明正在排队打包。这里会等待很久，但是没有意义，可以关闭了，并且到expo的官网面板中查看项目

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

json 复制代码

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

然后重新打包一次

css 复制代码

eas build --platform android --profile release

因为要排队打包，快则20分钟，慢则2个小时。

等待10分钟后，就打包好了，下载安装即可。

七、本地打包app

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

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

在项目中添加一个Dockerfile用于构建所有的环境

yml 复制代码

FROM ubuntu:latest

RUN apt-get update
RUN apt-get install -y curl gnupg unzip
RUN curl -sL https://deb.nodesource.com/setup_20.x | bash -
RUN apt-get install -y sdkmanager
RUN apt-get install -y nodejs
RUN apt-get install -y git
RUN apt-get install -y openjdk-17-jdk
RUN apt-get install -y openjdk-17-jre
RUN curl -L -o sdk-tools.zip "https://dl.google.com/android/repository/sdk-tools-linux-3859397.zip" && \
unzip sdk-tools.zip -d /usr/local/android-sdk && \
rm sdk-tools.zip
RUN yes | sdkmanager --licenses && \
sdkmanager "platform-tools" "platforms;android-28"
RUN curl -L -o ndk.zip "http://dl.google.com/android/repository/android-ndk-r21e-linux-x86_64.zip" && \
unzip ndk.zip -d /usr/local/android-ndk && \
rm ndk.zip

ENV ANDROID_HOME /usr/local/android-sdk
ENV PATH $PATH:$ANDROID_HOME/tools:$ANDROID_HOME/tools/bin:$ANDROID_HOME/platform-tools
ENV ANDROID_NDK_HOME /usr/local/android-ndk/android-ndk-r21e
ENV PATH $PATH:$ANDROID_NDK_HOME

执行命令

erlang 复制代码

docker build -t android .

然后再添加一个dockerfile.build用于打包

yml 复制代码

FROM android

WORKDIR /WWW/APP/

ADD ./ /WWW/APP/

RUN npm i -g eas-cli --registry=https://registry.npmmirror.com/

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

yml 复制代码

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

整体的结构

等android镜像构建好了后，运行命令

yml 复制代码

docker-compose up -d

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

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

css 复制代码

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

报红失败了

再继续执行脚本，因为这个能不能打包成功和网络有关

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

当然最好的方案还是用macOS来打包

将create-react-native改造成expo

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

搭建项目

java 复制代码

npx react-native@latest init test

然后安装expo

css 复制代码

npm i expo -D

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

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的脚本

json 复制代码

   "expo": "expo start",

然后启动即可

arduino 复制代码

npm run expo

改造成功

旧项目改造失败怎么办？

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

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

expo的好处是什么？

开始

一、安装依赖

二、手机下载Expo go

三、创建项目

四、启动项目

五、真机调试

六、云打包app

七、本地打包app

将create-react-native改造成expo

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

搭建项目

旧项目改造失败怎么办？