Reactive Native Listenansicht Datenanalyse von JSON

Question

Dies ist die JSON im versucht, in meiner Listenansicht zu analysieren und zu zeigen.

Die Daten Ich mag würde auf meiner Liste Ansicht anzuzeigen ist Zoneinfo [ „Name“] als Sektionskopf. Für die Listenansicht würde es 3 Text geben, der den Namen, QueueTime oder ShowTime zeigt.

Ich habe meine JSON in meiner Statusvariablen gespeichert.

Dies ist der Code, den ich versucht habe, die Daten aus dem JSON abzurufen.

Jeder kann mir zeigen, wie ich das JSON analysieren und auf meinem Listenansicht anzeigen kann?

Answer 1

Es gibt sicher mehrere Möglichkeiten, dieses Ziel zu erreichen, bis jetzt bin ich ziemlich froh, dass es auf diese Weise mit:

ich bin sicher, werden Sie Ihren Weg finden, um ;-)

export default class extends React.Component { 
constructor(props) { 
    super(props); 

    this.renderRow = this.renderRow.bind(this); 
    this.renderSectionHeader = this.renderSectionHeader.bind(this); 


    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2, 
    sectionHeaderHasChanged: (s1, s2) => s1 !== s2});  

    this.state = { 
     dataSource: ds.cloneWithRowsAndSections({}), 

    }; 

} 

componentDidMount(){ 
    ... load your json and assign data to the state 

    this.setState({ 
      dataSource: this.state.dataSource.cloneWithRowsAndSections(spots) 
     }); 
} 

renderRow(rowData: string, sectionID: number, rowID: number) { 
    return (
     <TouchableOpacity onPress={()=>this.onRowPress(rowData)}> 
     ... your row content 
     </TouchableOpacity> 
    ) 
} 


renderSectionHeader(sectionData, category) { 
    return (
    <View style={styles.rowHeaderContainer}> 
     ... your header content 
    </View> 
) 
} 

render(){ 
    return (
     <View style={styles.container}> 
      <ListView      
       dataSource={this.state.dataSource} 
       renderRow={this.renderRow} 
       enableEmptySections={true} 
       renderSectionHeader={this.renderSectionHeader} 
      /> 
     </View> 
    ); 
} 
}