从React Native中image组件中的JSON数据导入图像字符串

Question

我正试图从mock数据数组中获取图像字符串，并将其推送到React Native中的<Image>组件中。这是我的数据数组：

const data= [
{
title: 'Lorem ipsum dolor sit amet.',
price: '$1.99',
image: '../assets/img/item01.jpg',
},
{
title: 'Lorem ipsum dolor sit amet.',
price: '$1.99',
image: '../assets/img/item02.jpg',
},
{
title: 'Lorem ipsum dolor sit amet.',
price: '$1.99',
image: '../assets/img/item03.jpg',
},
{
title: 'Lorem ipsum dolor sit amet.',
price: '$1.99',
image: '../assets/img/item04.jpg',
},
{
title: 'Lorem ipsum dolor sit amet.',
price: '$1.99',
image: '../assets/img/item05.jpg',
},
{
title: 'Lorem ipsum dolor sit amet.',
price: '$1.99',
image: '../assets/img/item06.jpg',
},
{
title: 'Lorem ipsum dolor sit amet.',
price: '$1.99',
image: '../assets/img/item07.jpg',
},
];

我正试图通过映射数据数组来使用图像值。图像组件是：

<View style={{
width: 164,
height: 164,
borderRadius: (1 / 2) * 164,
backgroundColor: color.white,
shadowColor: 'rgba(57,57,57,0.5)',
shadowOffset: { width: 0, height: 1 },
shadowRadius: 2,
elevation: 20,
overflow: 'hidden',
}}>
<Image
source={require(data.image)}
resizeMode='contain'
style={{ width: null, height: null, flex: 1 }}
/>
</View>

如果使用此选项，则出现错误：Invalid call at line 60: require(item.illustration)

如果我使用-source={{ uri: item.illustration }}而不是require函数，则显示Nothing。有人能帮我了解如何从数组导入本地图像吗？

Answer 1

如果您使用的是本地图像，则需要添加require函数来加载图像，然后您需要添加
uri

您可以在数据阵列中添加需要功能的本地图像，如

const data= [
{
title: 'Lorem ipsum dolor sit amet.',
price: '$1.99',
image: require(../assets/img/item01.jpg),
},
{
title: 'Lorem ipsum dolor sit amet.',
price: '$1.99',
image: require(../assets/img/item01.jpg),
},
]

在你的图像视图中，只需要像这样称它为

<Image
source={data.image}
resizeMode='contain'
style={{ width: null, height: null, flex: 1 }}
/>

如果你无法实现，那么你也可以像这样导出图像，并添加到数据阵列中

export const first_img = require('../assets/img/item01.jpg');
export const second_img = require('../assets/img/item01.jpg');

const data= [
{
title: 'Lorem ipsum dolor sit amet.',
price: '$1.99',
image: first_img,
}
]

你可以用同样的方式称之为

Answer 2

有点晚了，但希望它能帮助到别人。您可以使用来自图像的resolveAssetSource

const data= [
{ title: 'Lorem ipsum dolor sit amet.',
price: '$1.99',
image: Image.resolveAssetSource(require("../assets/img/item01.jpg")).uri, 
}
]

当然你需要先导入图像，

import { Image } from "react-native";