从包含许多文件的文件夹中反应本机动态导入图像

Question

我有一个图像文件夹，上面写着answers ，我在其中存储了我的问题的答案，这些答案是图像

该文件夹中目前有 200 张图像。

现在我想根据用户的答案显示答案的图像。

我随机生成答案

`var answer = getAnswers(data)` // some calculation for file name for answer

<Image source={require('../path/to/my/answer/' + answer + '.jpg')}

这样做我收到错误``需要expect exactly 1 string literal argument

我开始知道建造者需要在建造之前知道位置。 但是如何解决此类问题。

我无法为 require initailly 映射 200 个文件

var one = require('../path/one.jpg')
var two = require('../path/two.jpg')

我该如何解决此类问题。 有没有办法做到这一点？

需要帮助。

Answer 1

require 中的动态搜索路径根本不可能。

据我了解，您在这里有两个选择：

1.生成Image文件

您可以编写一个脚本来扫描图像文件夹并生成图像 url 列表，而不是手动编写 200 行。 我建议采用类似于以下格式的格式：

// Images.js

export const Answers = { 
   ANSWER_ONE : require('../path/one.jpg'),
   ANSWER_TWO : require('../path/two.jpg'),
   ...
}

然后使用它：

import {Answers} from './Images'

var answer = getAnswers(data)

<Image source={Answers[answer]} />

2. 将图片文件复制到资产文件夹

如果选择此选项，您必须将所有图像文件复制到您的 android 和 ios 项目资产文件夹。 然后，您可以像这样使用它们：

var answer = getAnswers(data)

<Image source={{uri: '../path/to/my/answer/' + answer + '}} />

...

尽管第二个选项看起来很诱人，但在大多数情况下我更喜欢第一个。 主要是因为第二个要求您每次添加图像时制作两个副本（假设您同时支持 android 和 ios）。 此外，选项 1 提供了更好的键入建议，您不会拼错图像名称。

希望这可以帮助！