React Native如何根据环境文件选择对应品牌的assets资源文件夹？

核心思路是把品牌判断逻辑完全收口到assets/index.js中，业务层无需感知环境判断逻辑，直接引用导出的资源对象即可。

1. 前置配置：添加品牌环境变量 #

在项目根目录的环境变量配置文件（如.env.xxx系列文件）中新增品牌标识字段：

• 打包品牌1的包时，对应环境文件写：VITE_APP_BRAND=brand1
• 打包品牌2的包时，对应环境文件写：VITE_APP_BRAND=brand2

注：如果是React项目用REACT_APP_BRAND前缀，Vue2/webpack项目可以自己在构建配置中定义环境变量。

2. 编写assets/index.js导出逻辑 #

场景1：构建时确定品牌（90%以上白标项目适用） #

该方案只会打包对应品牌的资源，不会冗余引入其他品牌的文件，包体积更小：

// assets/index.js
// 读取环境变量的品牌标识，无匹配时默认用brand1兜底
const CURRENT_BRAND = import.meta.env.VITE_APP_BRAND || 'brand1'

// 统一导出对应品牌的全量资源
export const brandAssets = {
  fonts: require(`./${CURRENT_BRAND}/fonts`),
  images: require(`./${CURRENT_BRAND}/images`),
  // 后续新增品牌专属配置、样式变量等都可以在这里扩展
}

场景2：运行时可动态切换品牌 #

如果你的项目支持用户端切换品牌，用以下写法提前加载所有品牌资源，切换时直接换映射即可：

// assets/index.js
// 提前引入所有品牌资源
const allBrandAssets = {
  brand1: {
    fonts: require('./brand1/fonts'),
    images: require('./brand1/images')
  },
  brand2: {
    fonts: require('./brand2/fonts'),
    images: require('./brand2/images')
  }
}

// 调用时传入品牌标识即可拿到对应资源
export const getBrandAssets = (brand) => allBrandAssets[brand] || allBrandAssets.brand1

3. 资源自动批量导入配置 #

如果不想手动给每个品牌的images/fonts文件夹写导出语句，可以用工具函数自动批量导出，以vite项目的images文件夹为例：
在每个品牌的images文件夹下新建index.js：

// assets/[品牌名]/images/index.js
// 自动导入当前文件夹下所有png格式的图片
const imageModules = import.meta.glob('./*.png', { eager: true })

export default Object.fromEntries(
  Object.entries(imageModules).map(([filePath, module]) => {
    // 把文件名当key，资源路径当value导出
    const fileName = filePath.split('/').pop().replace(/\.(png|jpg|svg)$/, '')
    return [fileName, module.default]
  })
)

4. 组件内使用方式 #

业务组件无需做任何环境判断，直接引入资源即可：

// 任意业务组件
import { brandAssets } from '@/assets'

// 直接使用对应品牌的图片
function Demo() {
  return <img src={brandAssets.images.img1} alt="品牌展示图" />
}

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