u

2026-04-23 17:22:34 +08:00
1 parent bddbb49e19
commit e42ebf916f
@@ -0,0 +1,384 @@
+# Expo（React Native）
+
+[Expo](https://docs.expo.dev/) 是一个基于 React Native 的框架，旨在简化移动应用开发。它提供了一套工具和服务，让开发者可以更快速地构建、测试和发布 React Native 应用。
+
+## 初始化项目
+```bash
+pnpm create expo-app@latest --template blank-typescript
+```
+
+[官网模板](https://docs.expo.dev/more/create-expo/) 如下：
+
+| 模板名称                                                     | 描述                                                         |
+| ------------------------------------------------------------ | ------------------------------------------------------------ |
+| [`default`](https://github.com/expo/expo/tree/main/templates/expo-template-default) | 默认模板，用于构建多页面应用。包含推荐工具，如 **Expo CLI**、**Expo Router** 路由库，并启用 **TypeScript** 配置。适合大多数应用。 |
+| [`blank`](https://github.com/expo/expo/tree/main/templates/expo-template-blank) | 最简模板，仅安装最基本依赖，不包含导航配置。                 |
+| [`blank-typescript`](https://github.com/expo/expo/tree/main/templates/expo-template-blank-typescript) | 空白模板，但启用了 **TypeScript** 支持。                     |
+| [`tabs`](https://github.com/expo/expo/tree/main/templates/expo-template-tabs) | 启用基于文件的路由系统（Expo Router），并默认使用 **TypeScript**，适合多标签页结构的应用。 |
+| [`bare-minimum`](https://github.com/expo/expo/tree/main/templates/expo-template-bare-minimum) | 带有原生目录（`android` 与 `ios`）的空白模板，创建时会自动运行 [`npx expo prebuild`](https://docs.expo.dev/workflow/prebuild)。适合需要直接修改原生代码的项目。 |
+
+**启动项目：**
+
+```bash
+npx expo start
+```
+
+## 打包发布
+### 本地打包
+#### 1. 安装 [Android Studio]( https://developer.android.com/?hl=zh-cn)
+
+1. 下载安装
+
+   - 按照官网提示依次安装 SDK 工具和必要组件。
+
+   - 安装完成后，记住 SDK 的安装路径（例如：`D:\data\sdk`，默认位置是：`C:\Users\<你的用户名>\AppData\Local\Android\Sdk`），后续需要用到。
+
+2. 配置环境变量
+
+   - 打开 **系统属性 → 高级 → 环境变量**。
+
+   - 在 **系统变量** 中新增：
+
+     ```
+     变量名：ANDROID_HOME
+     变量值：D:\data\sdk  
+     ```
+
+   - 在 **Path** 中新增：
+
+     ```bash
+     %ANDROID_HOME%\platform-tools
+     %ANDROID_HOME%\tools
+     %ANDROID_HOME%\tools\bin
+     ```
+
+   - 保存设置。
+
+3. 验证安装
+
+   - 打开命令行，执行：
+
+     ```
+     echo %ANDROID_HOME%
+     ```
+
+   - 如果输出 SDK 路径，则说明配置成功。
+
+   
+
+####  2. 安装 [jdk17](https://adoptium.net/zh-CN/temurin/releases?version=8&os=any&arch=any)
+
+1. 下载安装
+
+   - 下载对应版本解压即可。
+   - 安装成功后，记住 jdk 的安装路径，后续需要用到。
+
+2. 配置环境变量
+
+   - 打开 **系统属性 → 高级 → 环境变量**。
+
+   - 在 **系统变量** 中新增：
+
+     ```bash
+     变量名：JAVA_HOME
+     变量值：D:\devtool\jdk\jdk-17.0.16+8
+     ```
+
+   - 在 **Path** 中新增：
+
+     ```bash
+     %JAVA_HOME%\bin
+     ```
+
+   - 保存设置。
+
+3. 验证安装
+
+   - 打开命令行，执行：
+
+     ```bash
+     java --version
+     ```
+
+   - 如果输出 jdk 的信息，则说明配置成功。
+
+
+
+#### 3. Expo 项目启用 [Prebuild](https://docs.expo.dev/workflow/prebuild/)
+
+1. 生成原生项目
+
+   ```bash
+   npx expo prebuild
+   ```
+
+   然后执行完毕后，会生成 `android` 目录。
+
+2. 清除并重新生成原生项目
+
+   ```bash
+   npx expo prebuild --clean
+   ```
+
+   会删除已有的 `android` 和 `ios` 目录，然后重新生成。
+
+#### 4. 配置 Keystore
+##### 4.1 生成密钥
+
+```bash
+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`
+
+   ```bash
+   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 签名
+
+   ```bash
+   buildTypes {
+       release {
+           signingConfig signingConfigs.release
+       }
+       
+       debug {
+           signingConfig signingConfigs.debug
+       }
+   }
+   ```
+
+##### 4.3 脚本配置（推荐）
+
+1. 在 expo 项目根目录下新增 `plugins\withAndroidSignature.js` 文件，内容如下：
+
+   ```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 的信息）：
+
+   ```json
+   {
+     "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` 中指定这个项目级插件：
+
+   ```json
+   {  
+     "expo": {  
+       "plugins": [  
+         "./plugins/withAndroidSignature"
+       ]
+     }  
+   }
+   ```
+
+#### 5. 打包
+
+- 编译成  Google Play 商店用的 .aab 文件
+
+  ```bash
+  ./gradlew bundleRelease 
+  ```
+
+- 直接安装的 .apk 文件
+
+  ```bash
+  ./gradlew assembleRelease
+  ```
+
+**注意**：这个时候可能会下载 `gradle` 、`apk` 等资源，网络速度可能过慢。
+
+**解决方法**：在 `android/gradle.properties` 添加网络代理：
+
+```bash
+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
+
+   ```bash
+   npm install -g eas-cli
+   ```
+
+2. 注册并登录 Expo 账户
+
+   - 访问 https://expo.dev/ 注册账户，然后命令行登录：
+
+     ```bash
+     expo login
+     ```
+
+3. 配置项目构建
+
+   - 输入以下命令，选择 Android 平台即可。
+
+     ```bash
+     eas build:configure
+     ```
+
+4. 构建 Android 包
+
+   - 默认构建 AAB 包（上传 Google Play）：
+
+     ```bash
+     eas build --platform android
+     ```
+
+   - 构建 APK（可直接安装）：
+
+     ```bash
+     eas build -p android --profile preview
+     ```
+### 安装包体积优化
+
+#### 方法1（简单）
+找到  `android/gradle.properties` 文件，找到 `reactNativeArchitectures` ，根据需要删除即可
+
+```properties
+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` 架构的设备上运行，但体积最大。
+