使用 React Native 动态加载本地存储的图像

Question

在 loop/list 中动态加载图像资源时出现问题。

我拥有所需的所有静态本地资源：

assets/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 也是一个字符串，但其值为文件系统中图像的实际路径（例如 ./app-logo.png）。所以如果你想动态加载图像对象到image_name，你应该像这样使用括号表示法：

const image_name = images[`card${item.cardName}`];

这样 image_name 现在将指向您的图像的路径（例如 ./app-logo.png）。

使用 React Native 动态加载本地存储的图像

Dynamic loading of locally stored images with react native

reactjs

react-native

native-base