Question

如果我显示这样的图像，它会起作用：

Net::HTTP.start(uri.host, uri.port, use_ssl: true)

但失败了：

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

<Thumbnail source= {require('../images/'+ {person.id} +'.jpg')} />来自person.id数组。在people打印它会将输出设为<Text>{person.id}</Text>或01。

如何显示名称为prop.value的本地图像？

我试过了：

和

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

两者都失败并出现错误：未命名的命名模块：'../ images / .jpg' https://ruby-doc.org/stdlib-2.4.1/libdoc/net/http/rdoc/Net/HTTP.html#class-Net::HTTP-label-HTTPS

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

Answer 2

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

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

此问题已在React Native

的问题中讨论过

#2481，#6391，#10290

Answer 3

如果从person.id中移除大括号，它将起作用：

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

像这样：

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

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

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

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

3 个答案: