如何在不执行expo prebuild的情况下为Expo Android快捷方式添加Drawable图片

核心思路 #

通过编写自定义Expo Config Plugin，在EAS构建的expo prebuild阶段自动将本地图片复制到Android项目的drawable目录，无需提前生成完整Android文件夹。

步骤1：编写自定义Config Plugin #

在项目根目录创建plugins/android-shortcut-icons.js文件，实现图片复制逻辑：

const { withAndroidResources } = require('@expo/config-plugins');
const fs = require('fs');
const path = require('path');

module.exports = function withShortcutIcons(config) {
  return withAndroidResources(config, async (config) => {
    // 本地图片存放目录（根据你的实际路径调整）
    const sourceIconDir = path.resolve(__dirname, '../assets/shortcut-icons');
    // Prebuild生成的Android资源目标目录
    const targetDrawableDir = path.join(
      config.modRequest.platformProjectRoot,
      'app/src/main/res/drawable'
    );

    // 确保目标目录存在
    if (!fs.existsSync(targetDrawableDir)) {
      fs.mkdirSync(targetDrawableDir, { recursive: true });
    }

    // 复制所有图片文件到drawable目录
    if (fs.existsSync(sourceIconDir)) {
      const iconFiles = fs.readdirSync(sourceIconDir);
      iconFiles.forEach(file => {
        const sourcePath = path.join(sourceIconDir, file);
        const targetPath = path.join(targetDrawableDir, file);
        // 仅复制图片文件（可根据需要添加后缀判断）
        if (['.png', '.jpg', '.webp'].includes(path.extname(file).toLowerCase())) {
          fs.copyFileSync(sourcePath, targetPath);
        }
      });
    }

    return config;
  });
};

步骤2：配置app.json引入插件 #

在项目的app.json（或app.config.js）的plugins数组中添加自定义插件：

{
  "expo": {
    // ...其他项目配置
    "plugins": [
      "./plugins/android-shortcut-icons.js",
      "react-native-quick-actions"
    ]
  }
}

步骤3：准备符合规范的图片资源 #

1. 在项目根目录创建assets/shortcut-icons文件夹，放入你的快捷方式图片。
2. 图片命名必须遵守Android资源规则：仅使用小写字母、数字和下划线，不能包含空格、大写字母或特殊字符（比如shortcut_home.png是合法的，Shortcut Home.png不合法）。
3. 如需适配多屏幕密度，可在assets/shortcut-icons下创建子目录（如mdpi、hdpi、xhdpi），并修改插件代码，将对应目录的图片复制到Android项目的res/drawable-xxx目录中。

验证与构建 #

• 本地测试：运行expo prebuild --no-install，检查生成的android/app/src/main/res/drawable目录下是否已存在你的图片，确认后可删除生成的Android文件夹。
• EAS构建：直接提交代码进行EAS构建，插件会自动在构建过程中完成图片复制，之后就可以在react-native-quick-actions的配置中直接使用图片文件名（无需路径）。

内容的提问来源于stack exchange，提问作者Tushar Agrawal