Files
workspace/notes/前端开发/react-native/expo.md
T
2025-10-22 17:31:54 +08:00

6.9 KiB

官网:https://expo.dev/

初始化项目

打包

云打包

  1. 安装 EAS CLI

    npm install -g eas-cli
    
  2. 注册并登录 Expo 账户

  3. 配置项目构建

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

      eas build:configure
      
  4. 构建 Android 包

    • 默认构建 AAB 包(上传 Google Play):

      eas build --platform android
      
    • 构建 APK(可直接安装):

      eas build -p android --profile preview
      

本地打包(EAS方式)

本地打包(原生方式)

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.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.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. 编译