Reactjs 使用react native动态加载本地存储的图像_Reactjs_React Native_Native Base

Reactjs 使用react native动态加载本地存储的图像

reactjs react-native

Reactjs 使用react native动态加载本地存储的图像,reactjs,react-native,native-base,Reactjs,React Native,Native Base,循环/列表中图像资源的动态加载问题我拥有所需的所有静态本地资源： 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 d

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

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

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>
    );
}
...

。。。
从“../assets/images”导入图像；
...
渲染系统（项目）{
const image_name=`images.card${item.cardName}`；
console.log（image_name）；//images.cardOne、images.cardtow2等。。
返回(
//这是包装RN图像组件的nativebase组件
{item.name}
);
}
...

没有资源被加载。然而，如果我直接将source={image\u name}更改为source={images.cardOne}（其中images.cardOne与第一次迭代中的image\u name变量完全相同），它就可以工作了——除了它们都具有相同的映像这一事实

我还尝试使用{{uri:image_name}}语法，但也没有任何效果

除了创建大量的switch语句之外，似乎没有任何解决方案。这是因为image\u name是一个字符串，其值为

images.cardOne

，而images.cardOne也是一个字符串，但其值为文件系统中图像的实际路径（例如

/app logo.png

）。因此，如果要将images对象动态加载到image_name，应使用括号表示法，如下所示：

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