React Native中使用变量路径的Dynamic import动态导入无法运行

• React Native 默认使用的打包工具 Metro 对动态导入的支持依赖构建阶段的静态路径分析：打包时 Metro 需要提前识别所有可能被引入的模块路径，将对应模块预编译后打入最终产物包，运行时才能正常加载。
• 硬编码完整路径的写法，Metro 可以在构建阶段直接定位到目标模块，完成打包流程，因此可以正常运行。
• 将拼接完成的完整路径赋值给变量后再传入 import() 的写法，Metro 在构建阶段无法解析出具体的模块引用范围，会跳过该模块的打包，运行时自然找不到对应模块触发报错。

• 方案1：将固定路径前缀直接写在 import() 的模板字符串内，仅动态部分用变量插值，让 Metro 可以识别模块范围
  正确写法示例：

  // 不要提前把完整路径赋值给变量，固定前缀直接写在import括号内
  import(`../Util/Cache/${fileName}`).then((module) => {
    console.log('module', module);
  })
  

  该写法下 Metro 会自动将 ../Util/Cache/ 目录下所有符合后缀规则的模块预打包，运行时即可正常匹配到目标文件。
• 方案2：提前维护路径映射表，所有导入路径都用硬编码写法
  如果动态导入的模块数量有限，推荐使用该方案，不会打包多余的无用模块，兼容性最好：

  const moduleMap = {
    'xxx.js': () => import('../Util/Cache/xxx.js'),
    'yyy.js': () => import('../Util/Cache/yyy.js'),
    // 其他需要用到的模块依次补充
  }
  // 调用时直接取对应方法执行即可
  moduleMap[fileName]().then(module => {
    console.log('module', module)
  })
  

• 方案3：开启 Metro 实验性动态导入支持
  如果你使用的是 0.72 及以上版本的 React Native，可以在项目根目录的 metro.config.js 中配置开启 experimentalImportSupport 相关参数，放宽动态导入的路径解析规则，但该方案属于实验性功能，稳定性不如前两种，非必要不推荐使用。

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