React Native白标应用如何仅打包指定品牌所需资源？

核心问题原因 #

你当前使用的babel-plugin-module-resolver仅负责模块路径的重定向，不会影响React Native默认打包工具Metro的静态资源扫描逻辑。Metro默认会遍历项目根目录下所有未被排除的、符合资源扩展名规则的文件，只要未显式排除其他品牌的资源目录，不管代码是否引用，这些资源都会被打入最终包体。

纯JS侧实现方案（无需依赖原生targets/flavours） #

通过调整Metro配置，按当前打包的品牌变量排除其余品牌的资源和代码目录，从根源上避免多余资源被扫描打包，配合你已有的babel模块解析配置即可实现按需打包：

1. 项目根目录新增/修改metro.config.js配置：

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');

// 读取打包时传入的品牌环境变量
const targetBrand = process.env.APP_BRAND || 'default';
// 配置需要排除的目录：非当前目标品牌的资源文件夹、非当前品牌的业务代码文件夹
const blockListRules = [
  // 排除其他品牌的独立资源文件夹
  new RegExp(`./assets_(?!${targetBrand}).*`),
  // 排除brands目录下非当前品牌、非默认兜底的目录
  new RegExp(`./App/brands/(?!${targetBrand}|default).*`)
];

const config = {
  resolver: {
    blockList: blockListRules
  }
};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);

2. 打包时传入对应品牌变量即可，示例命令：

# 打包app1的Android生产包
APP_BRAND=app1 ./gradlew assembleRelease
# 打包app2的iOS生产包
APP_BRAND=app2 xcodebuild -scheme YourScheme -configuration Release archive

如果你使用Expo框架，可额外在app.config.js中配置资源打包规则进一步收敛：

export default ({ config }) => {
  const targetBrand = process.env.APP_BRAND || 'default';
  return {
    ...config,
    // 仅打包当前品牌和默认兜底的资源
    assetBundlePatterns: [
      `./App/brands/${targetBrand}/**/*`,
      './App/brands/default/**/*'
    ]
  };
};

关于targets/flavours的说明 #

targets/flavours不是唯一实现方案，上述纯JS侧配置即可满足仅打包指定资源的需求。如果你的白标应用还需要修改原生侧配置（如包名、应用图标、启动页、原生权限配置等），配合原生端的targets（iOS）和flavours（Android）实现会更便捷，属于原生侧差异化配置的标准实现方案。

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