在本机反应中使用地图功能时图像未显示

Posted 2023-02-14

【中文标题】在本机反应中使用地图功能时图像未显示

【英文标题】：image is not displaying while using a map function in react native

【发布时间】：2021-04-04 11:17:00

【问题描述】：

我已经硬编码了一些数据并制作了一个地图来获取我的数组的所有数据， 除我的图像外，所有数据都显示。 我尝试了几种解决方案，但没有任何效果。 当我在字符串中使用带有图像路径的要求时，它正在工作，但我找不到显示不同图像的方法 有什么想法吗？

var articleData = [
     name: "Textile motorcycle jacket", brand: "Dainese", img: "../assets/Jacket.jpg", price: '200' ,
     name: "Summer motorcycle gloves", brand: "Furygan", img: "../assets/summer_gloves.jpg", price: '30' ,
     name: "Winter motorcycle gloves", brand: "Triumph", img: "../assets/winter_gloves.jpg", price: '70' ,
     name: "Motorcycle boots", brand: "BMW", img: "../assets/boots.jpg", price: '180' ,
     name: "Goretex / waterproof pants", brand: "Dainese", img: "../assets/pants.jpg", price: '150' ,
     name: "Back and safety protection", brand: "Dainese", img: "../assets/back_protection.jpg", price: '100' ,
  ]

  var ArticleList = articleData.map((article, i) => 
    return (<View  style= width: '47%', margin: 5 >

      <Image source=uri: article.img  style= height: 250, width: 200 />
      <View style= flex: 1, flexDirection: 'row', marginTop: 5, justifyContent: "space-between" >
        <Text style= fontWeight: 'bold' >article.brand</Text>
        <FontAwesome name="heart" size=20 color=colorLike />
      </View>
      <Text>article.name</Text>
      <Text>article.price€</Text>
    </View>
    )
  
  )

【参考方案1】：

您可以尝试像这样将 require 添加到 articleData 中

  name: "Textile motorcycle jacket", brand: "Dainese", img: require("../assets/Jacket.jpg"), price: '200' 

【讨论】：

谢谢它的工作！ ，我还将我的导入 从 react-native-element 更改为 react-native。

【参考方案2】：

你可以使用'require'

 <Image source=require(article.img  style= height: 250, width: 200 />

【讨论】：

感谢您的回答！正如我在上一篇文章中解释的那样，我尝试使用“require”并且它有效，但仅适用于我的数组的一行，而不适用于我的所有数据。正如我在 react native 文档中读到的那样，'require' 需要一个字符串，所以

在虚拟数据中使用require，例如； 名称：“Goretex / 防水裤”，品牌：“Dainese”，img：require("../assets/pants.jpg")，价格：'150' ，