React Native：遍历字符串数组并根据元素

Question

在这里React Native和JavaScript noob。目前，我有一个JavaScript数组，如

var my_stuff = ['text', 'img src=some_img.jpg', 'moretext']

我只需使用

即可渲染数组的内容

 render(){
     {my_stuff}
 }

我会在我的应用上看到：

 text
 img src=some_img.jpg
 moretext

但是我怎么能渲染图像，因为它目前是硬编码的。有没有办法让我遍历我的数组并一次渲染一个元素，但事先检查它是否包含＆＃39; img src =＆＃39;在开始时，将其渲染为反应原生图像而不是？

如果这不是正确的方法，是否有更好的方法来解决我想要完成的事情？

Answer 1

您的问题有几个组成部分。首先，渲染数据的方式需要更加结构化。考虑使用相同的硬编码数组

var my_stuff = ['text', 'some_img.jpg', 'moretext']

正确渲染这种方法的硬编码方式是

 render(){
   <Text>{my_stuff[0]}</Text>
   <Image source={require(my_stuff[1])}/>
   <Text>{my_stuff[1]}</Text>
 }

然后很明显，您的数据也需要结构化。您需要一种方法来识别数组中的每个对象是 Text 还是 Image 。像

这样的东西

var my_stuff = [{text: 'text'}, {image: 'some_img.jpg'}, {text: 'moretext'}]

然后从那里知道你应该渲染什么类型的项目要容易得多。然后，您可以遍历数组并为每个数组项返回一个渲染项。