javascript - 从包含许多文件的文件夹中 react native 动态导入图像

Question

我有一个图像文件夹说 answers我在哪里存储我的问题的答案，即图像

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

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

我随机生成答案

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

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

这样做我收到错误``require expect exactly 1 string literal argument
我开始知道 builder 需要在 build 之前知道位置。
但是如何解决此类问题。

我无法为 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. 将图片文件复制到 Assets 文件夹

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

var answer = getAnswers(data)

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

Read more about using image assets .

...

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

希望这可以帮助!