react native 的 require() 方法不支持运行时变量路径，必须使用静态字符串。本文详解如何通过预定义路径映射或条件导入实现基于变量的图片加载，并提供安全、可维护的替代方案。
react native 的 require() 方法不支持运行时变量路径，必须使用静态字符串。本文详解如何通过预定义路径映射或条件导入实现基于变量的图片加载，并提供安全、可维护的替代方案。
在 React Native 开发中，一个常见误区是试图将变量（如 activeCompany）直接嵌入 require() 调用中，例如：
require(`../../../companies/${activeCompany}/assets/images/splash-3.png`)⚠️ 这会导致构建失败，错误信息类似：
Unable to resolve module ... Module does not exist in the module map 或 require() only accepts string literals。
为什么不能用变量？
因为 require() 是 Webpack/RN Metro 的编译期静态分析函数，它在打包阶段就需要确定所有资源路径。JavaScript 变量值在运行时才确定，因此无法被解析为有效模块引用。
✅ 正确解决方案
方案一：分离路径与 require（仅适用于已知有限集合）
若 activeCompany 的取值是固定且可枚举的（如 'OzApp'、'NovaTech'），推荐提前声明所有可能的 require 引用，再通过对象映射选择：
import { activeCompany } from "../../../companies";
// 预先静态 require 所有公司对应的图片
const COMPANY_IMAGES = {
OzApp: require("../../../companies/OzApp/assets/images/splash-3.png"),
NovaTech: require("../../../companies/NovaTech/assets/images/splash-3.png"),
// 添加其他公司...
} as const;
export default function MyFunc() {
const SLIDER_DATA = [
{
key: '1',
title: appContexts.splashScreenTitle1,
description: appContexts.splashScreenDesc1,
picture: COMPANY_IMAGES[activeCompany as keyof typeof COMPANY_IMAGES] ||
require("../../Assets/fallback-splash.png"), // 默认回退图
splashScreen: require("../../Assets/swipeScreenBg3.jpg"),
titleColor: appColors.swipeScreenTitle1,
},
// ...
];
return (
<FlatList
data={SLIDER_DATA}
renderItem={({ item }) => (
<Image style={styles.spalshItemImage} source={item.picture} />
)}
keyExtractor={item => item.key}
/>
);
}✅ 优势：类型安全、构建期校验、无运行时 require 错误
❌ 局限：需手动维护映射表，不适用于动态/未知公司名
方案二：使用 Image.resolveAssetSource + uri（适用于本地静态资源）
若图片已作为普通文件放入项目（非 require 加载），可通过 uri 动态构造并配合 resolveAssetSource 确保正确处理：
import { Image, Platform } from 'react-native';
import { activeCompany } from "../../../companies";
// 构造本地资源 URI（仅限 iOS/Android 原生资源路径）
const getCompanySplashUri = () => {
if (Platform.OS === 'ios') {
return `../companies/${activeCompany}/assets/images/splash-3.png`;
}
return `file:///android_asset/../companies/${activeCompany}/assets/images/splash-3.png`;
};
// 注意：此方式需确保资源已正确复制到原生资源目录，且不推荐用于 JS 打包资源⚠️ 不推荐此方式 —— 跨平台兼容性差，且绕过 Metro 打包机制，易出错。
方案三（推荐）：构建时生成配置 + TypeScript 类型约束
将公司配置与资源绑定，在构建前生成类型化 JSON 配置，配合脚本自动 require 并导出：
// companies/config.generated.ts （由脚本生成）
export const COMPANY_ASSETS = {
OzApp: {
splash: require("../../../companies/OzApp/assets/images/splash-3.png"),
},
NovaTech: {
splash: require("../../../companies/NovaTech/assets/images/splash-3.png"),
}
} as const;然后在组件中安全使用：
import { COMPANY_ASSETS } from "../../../companies/config.generated";
import { activeCompany } from "../../../companies";
const companyAssets = COMPANY_ASSETS[activeCompany as keyof typeof COMPANY_ASSETS];
const splashImage = companyAssets?.splash || require("../../Assets/default-splash.png");⚠️ 重要注意事项
- ❌ require(item.picture) 在 JSX 中写法（如 <Image source={require(item.picture)} />）依然非法 —— require 必须是顶层字面量调用，不能出现在表达式中。
- ✅ 图片路径必须是相对路径字符串字面量，不能拼接、不能变量插值。
- ? 始终提供 fallback 图片，避免因配置缺失导致白屏。
- ? 对于大量图片资源，建议按公司拆分 assets 目录，并使用 TypeScript const assertions + keyof 实现编译期校验。
总结
动态图片导入的本质矛盾在于：打包工具需要静态路径，而业务逻辑需要运行时灵活性。最佳实践是“静态化动态”——即在构建阶段穷举可能路径并预 require，再通过类型安全的方式运行时选取。这既符合 React Native 架构约束，又保障了可维护性与稳定性。
