reactjs - 在React-Native NativeBase中显示本地镜像

Question

如果我像这样显示图像，它就会起作用:

<Thumbnail source= {require('../images/01.jpg')} />

但是失败了:

<Thumbnail source= {require('../images/'+ {person.id} +'.jpg')} />

person.id来自 people 的数组。打印在 <Text>{person.id}</Text>输出为 01或02 。

如何显示名称为prop.value的本 map 片？

我尝试过:

<Thumbnail source= {require(`../images/${person.id}.jpg`)} />

和

<Thumbnail source= {require('../images/'+ person.id +'.jpg')} />

两者都失败并出现错误:未命名的命名模块:'../images/1.jpg'

Answer 1

你想要实现的目标实际上是不可能的。

打包在运行时之前发生一次，因此变量person.id还没有值。

这已经讨论过 here .

在讨论中您可以看到此问题的解决方案。

基本上，您需要导入您将要使用的所有可能的文件。

简单方法:

var firstImage = require('../images/01.jpg');
var secondImage =  require('../images/02.jpg');  
var myComponent = (whichImageToUse) ? firstComponent : secondComponent;

复杂的方法:创建一个需要所有图像的文件。

allImages.js

export default {
    '01': require('../images/01.jpg'),
    '02': require('../images/02.jpg'),
    // import all other images
}

在需要使用图像的位置导入该文件并访问单个图像，如下所示:

import images from '../images/allImages'
<Thumbnail source={images[person.id]} />