Question

在循环/列表中动态加载图像资源的问题。

我需要所有静态本地资源：

资产/ images.js

const images = {
  appLogo: require('./app-logo.png'),

  cardOne: require('./cards/card-1.png'),
  cardTwo: require('./cards/card-2.png'),
  ...
  cardForty: require(./cards/card-40.png)
}

export default images;

然后在我的列表屏幕中：

...
import images from '../assets/images';
...
renderListItems(item) {

    const image_name = `images.card${item.cardName}`;
    console.log(image_name); // images.cardOne, images.cardTwo etc..

    return (
        <ListItem avatar>
            <Thumbnail square size={80} source={image_name} /> // This is nativebase component which wraps the RN image component
            <Body>
                <Text>{item.name}</Text>
            </Body>
            <Right>
                <NBIcon name="arrow-forward" />
            </Right>
        </ListItem>
    );
}
...

没有资源加载。然而，如果我直接将source = {image_name}更改为source = {images.cardOne}（其中images.cardOne与第一次迭代时的image_name变量完全相同），它可以工作 - 除了它们都具有相同的图像

我也尝试使用{{uri：image_name}}语法，但也没有发生任何事情。

除了创建一个庞大的switch语句

之外，似乎没有任何解决方案

Answer 1

那是因为image_name是一个值为images.cardOne的字符串，而images.cardOne也是一个字符串，但是带有文件系统中图像实际路径的值（例如{{ 1}}）。因此，如果要将图像对象动态加载到image_name，则应使用括号表示法，如下所示：

＆＃13;

./app-logo.png

＆＃13;

这样，image_name现在将指向图像的路径（例如const image_name = images[`card${item.cardName}`];）。

动态加载本地存储的图像与本机反应

1 个答案: