从 React Native 中的目录中加载一组图像

Question

我在目录中有一组图像，我想在react native中添加数组的路径。

映像名称为 1.png、2.png、3.png...20.png

以下是我目前使用的方法

const images = [require('../assets/1/1.png'),
require('../assets/1/2.png'),
require('../assets/1/3.png'),
...
require('../assets/1/20.png'),];

当图像数量有限时，这是可能的。在某些情况下，我可能需要添加 300 张图像。那么有没有一种简单的方法可以做到这一点呢？

我尝试添加循环，但它不起作用。

for (let i = 1; i < 300; i++) {
images.push(require('../assets/1/'+i+'.png'))    
}

编辑：上述方法中出现以下错误，

error: bundling failed: Error: ComponentsIdleLoop.js:Invalid call at line 9: require('../assets/1/' + i + '.png')
at F:_worksampleAppnode_modulesmetrosrcJSTransformerworker.js:317:19
at Generator.next (<anonymous>)
at asyncGeneratorStep (F:_worksampleAppnode_modulesmetrosrcJSTransformerworker.js:75:24)
at _next (F:_worksampleAppnode_modulesmetrosrcJSTransformerworker.js:95:9)

Answer 1

据我所知，因为 React Native 应用程序在构建时是静态捆绑的，required 资产是预先链接的，因此没有办法在运行时动态加载它们。我遇到了同样的问题并放弃了，最终手动/静态链接了所有内容。

有关更多信息，您可能需要查看 React Native - 使用动态名称的图像需要模块，其结论相同。