在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的本地图像？

我试过了:

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

和

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

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

Answer 1

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

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

这已经在这里讨论过了.

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

基本上你需要导入你将要使用的所有可能的文件.

简单方法:

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]} />