workspace/code/docusaurus/docs/framework/expo.md

Expo（React Native 工具链）

Expo 是一个基于 React Native 的框架，旨在简化移动应用开发。它提供了一套工具和服务，让开发者可以更快速地构建、测试和发布 React Native 应用。

初始化项目

pnpm create expo-app@latest --template blank-typescript

官网模板 如下：

模板名称	描述
default	默认模板，用于构建多页面应用。包含推荐工具，如 Expo CLI、Expo Router 路由库，并启用 TypeScript 配置。适合大多数应用。
blank	最简模板，仅安装最基本依赖，不包含导航配置。
blank-typescript	空白模板，但启用了 TypeScript 支持。
tabs	启用基于文件的路由系统（Expo Router），并默认使用 TypeScript，适合多标签页结构的应用。
bare-minimum	带有原生目录（android 与 ios）的空白模板，创建时会自动运行 npx expo prebuild。适合需要直接修改原生代码的项目。

启动项目：

npx expo start

打包发布

本地打包

1. 安装 Android Studio

1. 下载安装

   • 按照官网提示依次安装 SDK 工具和必要组件。

   • 安装完成后，记住 SDK 的安装路径（例如：D:\data\sdk，默认位置是：C:\Users\<你的用户名>\AppData\Local\Android\Sdk），后续需要用到。

2. 配置环境变量

   • 打开 系统属性 → 高级 → 环境变量。

   • 在 系统变量 中新增：

     变量名：ANDROID_HOME
     变量值：D:\data\sdk  
     

   • 在 Path 中新增：

     %ANDROID_HOME%\platform-tools
     %ANDROID_HOME%\tools
     %ANDROID_HOME%\tools\bin
     

   • 保存设置。

3. 验证安装

   • 打开命令行，执行：

     echo %ANDROID_HOME%
     

   • 如果输出 SDK 路径，则说明配置成功。

2. 安装 jdk17

1. 下载安装

   • 下载对应版本解压即可。
   • 安装成功后，记住 jdk 的安装路径，后续需要用到。

2. 配置环境变量

   • 打开 系统属性 → 高级 → 环境变量。

   • 在 系统变量 中新增：

     变量名：JAVA_HOME
     变量值：D:\devtool\jdk\jdk-17.0.16+8
     

   • 在 Path 中新增：

     %JAVA_HOME%\bin
     

   • 保存设置。

3. 验证安装

   • 打开命令行，执行：

     java --version
     

   • 如果输出 jdk 的信息，则说明配置成功。

3. Expo 项目启用 Prebuild

1. 生成原生项目

   npx expo prebuild
   

   然后执行完毕后，会生成 android 目录。

2. 清除并重新生成原生项目

   npx expo prebuild --clean
   

   会删除已有的 android 和 ios 目录，然后重新生成。

4. 配置 Keystore

4.1 生成密钥

keytool -genkey -v -keystore android-release.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

说明：

• my-release-key.keystore：生成的密钥文件名，可自定义路径
• my-key-alias：密钥别名
• RSA：加密算法
• 2048：密钥长度
• 10000：有效期（天）

4.2 手动配置

修改 android/app/build.gradle 文件

1. 修改 signingConfigs

   signingConfigs {
       release {
           storeFile file('android-release.keystore')  // keystore 文件路径
           storePassword '你的Keystore密码'             // keystore 密码
           keyAlias '你的KeyAlias'                     // 密钥别名
           keyPassword '你的Key密码'                   // key 密码
       }
   
       debug {
           storeFile file('debug.keystore')
           storePassword 'android'
           keyAlias 'androiddebugkey'
           keyPassword 'android'
       }
   }
   

2. 在 buildTypes 中设置 release 使用 release 签名

   buildTypes {
       release {
           signingConfig signingConfigs.release
       }
   
       debug {
           signingConfig signingConfigs.debug
       }
   }
   

4.3 脚本配置（推荐）

1. 在 expo 项目根目录下新增 plugins\withAndroidSignature.js 文件，内容如下：

   // plugins/withAndroidSignature.js
   
   const { withAppBuildGradle } = require("@expo/config-plugins");
   const fs = require("fs");
   const path = require("path");
   
   module.exports = function withAndroidSignature(config) {
       return withAppBuildGradle(config, config => {
           if (config.modResults.language === "groovy") {
               config.modResults.contents = setAndroidSignature(config.modResults.contents);
           } else {
               throw new Error("如果不是 groovy，则无法在 app/build.gradle 中设置 signingConfigs");
           }
           return config;
       });
   };
   
   function setAndroidSignature(appBuildGradle) {
       if (!fs.existsSync(path.resolve(__dirname, "../credentials.json"))) {
           console.warn("警告：没有设置正式版本的 Android Keystore 文件，因为 credentials.json 不存在。");
           return appBuildGradle;
       }
       const info = JSON.parse(fs.readFileSync(path.resolve(__dirname, "../credentials/credentials.json"), { encoding: "utf8" }));
   
       // 使用正则表达式插入签名信息
       let output = appBuildGradle.replace(
           /(signingConfigs\s*\{)/,
           `$1
           release {
               storeFile file(${JSON.stringify(path.resolve(__dirname, "../credentials/android-release.keystore"))})
               storePassword ${JSON.stringify(info.android.keystore.keystorePassword)}
               keyAlias ${JSON.stringify(info.android.keystore.keyAlias)}
               keyPassword ${JSON.stringify(info.android.keystore.keyPassword)}
           }`,
       );
   
       // 使用正则表达式替换 signingConfig
       output = output.replace(
           /(release\s*\{)[^}]*?signingConfig\s+signingConfigs\.debug/s,
           `$1
               signingConfig signingConfigs.release
   `,
       );
   
       return output;
   }
   

2. 在 expo 项目根目录下新增 /credentials/credentials.json 文件（该文件主要是 Keystore 的信息）：

   {
     "android": {
       "keystore": {
         "keystorePath": "credentials/android-release.keystore",  // Android keystore 文件路径
         "keystorePassword": "123456",                             // keystore 密码
         "keyAlias": "my-key-alias",                               // Key 别名
         "keyPassword": "123456"                                   // Key 密码
       }
     },
     "ios": {
       "provisioningProfilePath": "ios/certs/profile.mobileprovision", // iOS 描述文件路径
       "distributionCertificate": {
         "path": "ios/certs/dist-cert.p12",                              // iOS 分发证书路径
         "password": "password"                                          // 证书密码
       }
     }
   }
   

3. 在 app.json 中指定这个项目级插件：

   {  
     "expo": {  
       "plugins": [  
         "./plugins/withAndroidSignature"
       ]
     }  
   }
   

5. 打包

• 编译成 Google Play 商店用的 .aab 文件

  ./gradlew bundleRelease 
  

• 直接安装的 .apk 文件

  ./gradlew assembleRelease
  

注意：这个时候可能会下载 gradle 、apk 等资源，网络速度可能过慢。

解决方法：在 android/gradle.properties 添加网络代理：

systemProp.http.proxyHost=127.0.0.1
systemProp.http.proxyPort=7890
systemProp.https.proxyHost=127.0.0.1
systemProp.https.proxyPort=7890

打包结果在 android/app/build/outputs/apt/release 包下。

云打包

1. 安装 EAS CLI

   npm install -g eas-cli
   

2. 注册并登录 Expo 账户

   • 访问 https://expo.dev/ 注册账户，然后命令行登录：

     expo login
     

3. 配置项目构建

   • 输入以下命令，选择 Android 平台即可。

     eas build:configure
     

4. 构建 Android 包

   • 默认构建 AAB 包（上传 Google Play）：

     eas build --platform android
     

   • 构建 APK（可直接安装）：

     eas build -p android --profile preview
     

安装包体积优化

方法1（简单）

找到 android/gradle.properties 文件，找到 reactNativeArchitectures ，根据需要删除即可

reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64

保留 arm64-v8a 常用的即可

方法2（原生方法 选择更多）

在 android/app/build.gradle 文件中添加或修改以下配置：

android {
    // 其他配置...

    splits {
        abi {
            enable true          // 启用按 CPU 架构拆分
            reset()              // 重置默认架构列表
            include 'arm64-v8a', 'armeabi-v7a'
            universalApk false   // 是否生成包含所有架构的通用 APK（false 表示只生成分架构的独立包）
            // 还有一个 exclude 配置是排除指定架构的
        }
    }

    // 其他配置...
}

说明：

• enable true：启用架构拆分功能。
• reset()：清空默认的架构配置，避免重复。
• include：指定要生成的架构包，比如只打 arm64-v8a 和 armeabi-v7a。
• universalApk false：不生成通用包（即包含所有架构的 APK）。

举例：

执行打包命令后，将生成多个包，例如：

app-arm64-v8a-release.apk
app-armeabi-v7a-release.apk

每个 APK 只包含对应架构的二进制文件，体积更小。

如果把 universalApk 设置为 true，则只会生成一个：

app-universal-release.apk

这个包能在 arm64-v8a 和 armeabi-v7a 架构的设备上运行，但体积最大。

工具库