循环Json＆显示在React Native中

Question

我该如何处理循环从Json中检索到的结果？

render: function() { 
    console.log(this.state.list); 
    contents = (
     <View style={ styles.content }> 
     <Text>Loaded</Text> 

     </View> 
    ) 
    return (
     <View style={ styles.container }> 
     <View style={ styles.header }> 
     <Text style={ styles.headerText }>XXX</Text> 
     </View> 
     <View style={ styles.content }> 
      { contents } 
     </View> 
     </View> 
    ); 
    } 

Answer 1

阵营可以渲染元素的数组，所以你只需要构建一个数组并把它分配给您的contents变量。我用map做了一个例子。

render: function() { 
    console.log(this.state.list); 
    contents = this.state.list.results.map(function (item) { 
     return (
      <View key={item.user.email} style={ styles.content }> 
      <Text>{item.user.email}</Text> 
      </View> 
     ); 
    }); 
    return (
     <View style={ styles.container }> 
     <View style={ styles.header }> 
     <Text style={ styles.headerText }>XXX</Text> 
     </View> 
     <View style={ styles.content }> 
      { contents } 
     </View> 
     </View> 
    ); 
    } 

并且：当你有反应的元素的阵列，你应该提供一个独特的属性key到阵列中的每个元素。 See why。在这种情况下，我使用item.user.email作为唯一标识符，但是您可以使用其他属性，只需确保它是唯一的（item.user.md5是promissing）