在这里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
但是我怎么能渲染图像,因为它目前是硬编码的。有没有办法让我遍历我的数组并一次渲染一个元素,但事先检查它是否包含' img src ='在开始时,将其渲染为反应原生图像而不是?
如果这不是正确的方法,是否有更好的方法来解决我想要完成的事情?
答案 0 :(得分:0)
您的问题有几个组成部分。首先,渲染数据的方式需要更加结构化。考虑使用相同的硬编码数组
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'}]
然后从那里知道你应该渲染什么类型的项目要容易得多。然后,您可以遍历数组并为每个数组项返回一个渲染项。