通过变量动态导入文件 - 反应原生

Question

我有一个包含组件路径的 path.json 文件

// path.json

{
  "main": "./login/index.js",
  "paths": [
    {
      "name": "login",
      "path": "./login/index.js",
      "image": ""
    }
  ]
}

我想在 react native 中动态加载'./login/index.js'文件并呈现这个特定文件

我目前的实施

const MyComponent = createLazyContainer(() => {
  const componentPath = PathJson.main; // ./login/index.js
  return import(`${componentPath}`); //import error here @ line 7
});

export default MyComponent;

我收到以下错误：

第 7 行的无效调用：import("" + componentPath)

Answer 1

人们在线程中告诉您的内容是正确的，但我想添加一种可能的解决方案。所有导入/要求都在编译时解决，而不是在您尝试执行的运行时解决。在您运行应用程序时，如果您尚未导入文件，则无法使用它们。

有一种解决方法，假设您事先知道所有文件，这些文件将执行类似工厂的操作：

   const possiblePaths = {
     'one': require('path/to/file/1),
    'two': require('path/to/file/2)
}

funtion(type){
    return possiblePaths[type]
}

然后你以某种方式使用它：

render(){
   const MyComponent = function('one')

  return <MyComponent/>
}

这或多或少是伪代码，我不能马上工作，但希望你能明白。您需要存储对您可能需要的每个导入的引用，然后不要使用导入，而是使用在编译时为您创建的引用。