在 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/1.jpg'

Answer 1

如果您从 person.id:

中删除大括号，它将起作用

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

像这样：

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

或者这个（使用 es6 模板文字）：

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

Answer 2

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

打包在运行时之前发生一次，因此变量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]} />

Answer 3

替换 NativeBase Thumbnail 的组件是 React-Native 的 Image。

如果您使用 React Native Image 而不是使用 NativeBase Thumbnail 实现此目的，那么这就是 NativeBase 的问题。

这个问题已经在 React Native 的 issues 中讨论过

#2481, #6391, #10290

在 React-Native NativeBase 中显示本地图片

Show local images in React-Native NativeBase

reactjs

react-native

native-base