React 本机从本地数据库获取图像位置数据错误意外令牌","

Question

我试图从本地数据库中获取一些图像loc，而我试图将其显示为文本，它工作得很好，但当我试图传递它时，它给了我一个错误

const Products = () => {
const ProductCard = ({data}) => {
<TouchableOpacity>
<View>
<Image source={require({data.productImage})} />
</View>
</TouchableOpacity>
}
return (
<View>
<View style={{
width: '100%',
flexDirection: 'row',
justifyContent: 'space-between',
}}>
<Text>Filter by</Text>
<Text>Sort by</Text>
</View>
<View style={{width: '100%',}}>
{productData.map(item => {
return <ProductCard data={item} key={item.productSKU} />
})}
</View>
</View>

这是我的产品数据

export const productData = [{
"productSKU": 1,
"productSize": "M",
"productColor": "pink",
"productImage": "'../assets/images/productimage/product1.jpg'",
"productDesc": "It's a nice blue dress.",
"productPrice": 150,
"productName": "LIANA"

如果我使用"'../assets/images/productimage/product1.jpg'"或者'./assets/images/productimage/product1.jpg'，它仍然给我一个错误

它给出的错误是意外的标记"，"它需要改变数据。productImage到data,productImage明显错误

Answer 1

在这种情况下，你不能使用require函数来渲染图像，通常在react-native expo应用程序中，你已经在app.json文件中写下了资产，以便与require函数一起使用。

像这样在app.json文件中包含你的资产:

"assetBundlePatterns": [
"**/*",
"assests/*"
],

或者不使用资产，您可以在您的情况下使用{uri:"link"}方法。

<Image source={{uri: "link"}} />