动态导入 React Native 中依赖变量的图片资源-js教程-PHP中文网

React Native 的 require() 不支持运行时变量路径，必须在构建时确定路径；解决方法是先拼接路径字符串，再在 JSX 中调用 require()，或预加载所有可能的图片映射。

react native 的 `require()` 不支持运行时变量路径，必须在构建时确定路径；解决方法是先拼接路径字符串，再在 jsx 中调用 `require()`，或预加载所有可能的图片映射。

在 React Native 中，require() 是一个编译时静态分析函数，它无法解析包含变量（如 activeCompany）的动态路径。即使 activeCompany 是一个普通字符串常量（如 'OzApp'），只要它出现在 require(...) 的参数中，Metro 打包器就无法在构建阶段解析该路径，从而报错：Requiring unknown module 或类似提示。

你遇到的错误：

require("../../../companies/" + require('../../../companies/index') + "/assets/images/splash-3.png")

本质上是 Metro 尝试将整个表达式当作字面量路径处理失败所致——它不支持字符串拼接、模板字面量或任何运行时计算。

✅ 正确做法：分离路径构造与 require 调用

React Native Skills

{"answer":"构建高性能移动应用的 React Native 与 Expo 最佳实践。适用于构建组件、优化列表性能、实现……"}

下载

不要在数组定义中直接 require 动态路径，而应：

在渲染时（JSX 内）调用 require()，此时路径字符串已确定；
或更推荐：预先构建静态图片映射对象，避免重复 require 和提升性能与类型安全。

✅ 推荐方案一：在中动态 require

import { activeCompany } from "../../../companies";

export default function MyFunc() {
  const SLIDER_DATA = [
    {
      key: '1',
      title: appContexts.splashScreenTitle1,
      description: appContexts.splashScreenDesc1,
      // ✅ 仅存储相对路径字符串，不执行 require
      picturePath: `../../../companies/${activeCompany}/assets/images/splash-3.png`,
      splashScreen: '../../Assets/swipeScreenBg3.jpg',
      titleColor: appColors.swipeScreenTitle1,
    },
    {
      key: '2',
      title: appContexts.splashScreenTitle2,
      description: appContexts.splashScreenDesc2,
      picturePath: '../../Assets/splash-1.png',
      splashScreen: '../../Assets/swipeScreenBg2.jpg',
      titleColor: appColors.swipeScreenTitle2,
    }
  ];

  return (
    <flatlist data="{SLIDER_DATA}" renderitem="{({" item> (
        <view>
          {/* ✅ 在组件内调用 require —— 路径为确定字符串 */}
          <image style="{styles.spalshItemImage}" source="{require(item.picturePath)}"></image>
          {/* 其他内容... */}
        </view>
      )}
      keyExtractor={item => item.key}
    />
  );
}</flatlist>

⚠️ 注意事项：

require(item.picturePath) 中的 item.picturePath 必须是静态可分析的字符串字面量（Metro 仍需能“看到”完整路径）。若 activeCompany 来自异步状态（如 Redux 或 Context），此方式仍会失败——因为 Metro 构建时无法推断其值。
因此，activeCompany 必须是编译时已知的常量（如 const activeCompany = 'OzApp' as const），否则需改用方案二。

✅ 推荐方案二：预定义图片映射（健壮 & 可扩展）

适用于多公司场景，兼顾类型安全与构建兼容性：

// companies/images.ts
import OzAppSplash from '../../../companies/OzApp/assets/images/splash-3.png';
import AcmeSplash from '../../../companies/Acme/assets/images/splash-3.png';

export const COMPANY_SPLASH_IMAGES = {
  OzApp: OzAppSplash,
  Acme: AcmeSplash,
  // ✅ 编译时全部 require，无运行时风险
} as const;

// 在组件中使用
import { activeCompany } from "../../../companies";
import { COMPANY_SPLASH_IMAGES } from "./companies/images";

export default function MyFunc() {
  const splashImage = COMPANY_SPLASH_IMAGES[activeCompany as keyof typeof COMPANY_SPLASH_IMAGES];

  const SLIDER_DATA = [
    {
      key: '1',
      title: appContexts.splashScreenTitle1,
      description: appContexts.splashScreenDesc1,
      picture: splashImage, // ✅ 直接引用已 require 的模块
      // ...
    }
  ];
}

? 总结

方案	适用场景	优点	风险
渲染时 require(path)	activeCompany 是编译时常量（as const）	简单直接	若路径非法，运行时报错；不支持热重载路径变更
预定义映射对象	多租户/多品牌项目	类型安全、构建可靠、易于维护	需提前声明所有可能图片