动态生成<img/>标签[React-Native]

Question

我想渲染一个视图（包含问题和选项）。如果问题中有多个图像，我该如何相应地生成图像标记。 例如：

question: what is the value of <Image>21xtp-1.png</Image> and <Image>21xtp-2.png</Image> ?

我想用react native替换带有标签的Image标签。 我可以像

那样做

<Text>what is the value of <Image source={{uri:../images/21xtp.png-1}}/> and <Image source={{uri:../images/21xtp.png-1}}/> </Text>

但是如何根据问题中的图像数量来放置标签，这可能会有所不同。

Answer 1

我无法理解这个问题。但似乎您想根据数据动态渲染图像。

假设您的图像uris存储在一个数组中。然后你可以编写类似的代码：

for(i=0; i<imageUriArray.length;i++){
   return(
     <Image source={{uri : imageUriArray[i]}}/>
   )
}

Answer 2

@atitpatel提到的是正确的，但我无法从渲染中获取图像，因为我使用文件路径获取它

使用FILEPATH：

file:///data/user/0/com.example/files/21xtp.png 

所以，如果有任何人提出同样的问题。别忘了将height和width添加为图片标记的样式。

for(i=0; i<imageUriArray.length;i++){
return(
 <Image source={{uri : imageUriArray[i]}} style=
  {{height:300,width:300}}/>
 )
}

使用HTTP

如果您使用http获取文件，请务必将https添加到uri

for(i=0; i<imageUriArray.length;i++){
 return(
 <Image source={{uri : "https://www.example.com/123.png"}} style=
   {{height:300,width:300}}/>
 )
}