JSON解析在本地做出反應的ListView

Question

我有這個JSON，我想顯示在一個ListView

{ 
    "ZoneInfo":{ 
     "Name":"Hollywood", 
     "AttractionsInfo":[ 
     { 
      "ContentType":"USSShow", 
      "Availability":"True", 
      "Name":"Mel's Dinettes ", 
      "NextShowTime":"1:00PM", 
      "QueueTime":"", 
      "ShowTime":"1:00PM, 3:40PM and 6:15PM", 
      "WeatherStatus":"True" 
     }, 
     { 
      "ContentType":"USSShow", 
      "Availability":"True", 
      "Name":"Sesame Street Show - When I Grow Up ®", 
      "NextShowTime":"12:15PM", 
      "QueueTime":"", 
      "ShowTime":"12:15PM, 3:00PM and 5:40PM", 
      "WeatherStatus":"True" 
     }, 
     { 
      "ContentType":"USSShow", 
      "Availability":"True", 
      "Name":"The Cruisers", 
      "NextShowTime":"10:45AM", 
      "QueueTime":"", 
      "ShowTime":"10:45AM, 2:00PM and 4:45PM", 
      "WeatherStatus":"True" 
     }, 
     { 
      "ContentType":"USSShow", 
      "Availability":"True", 
      "Name":"The Minions From Despicable Me ", 
      "NextShowTime":"12:40PM", 
      "QueueTime":"", 
      "ShowTime":"12:40PM, 2:20PM, 4:40PM and 6:40PM", 
      "WeatherStatus":"True" 
     }, 
     { 
      "ContentType":"USSMeetAndGreet", 
      "Availability":"True", 
      "Name":"The Walk of Fame", 
      "NextShowTime":"", 
      "QueueTime":"", 
      "ShowTime":"", 
      "WeatherStatus":"True" 
     } 
     ] 
    } 
} 

節名將從ZoneInfo.Name。每一行的內容將是AttractionsInfo.Name

這是我當前的代碼

<ListView      
    dataSource={this.state.dataSource} 
    renderRow={this.renderRow} 
    enableEmptySections={true} 
    renderSectionHeader={this.renderSectionHeader}/> 
} 

renderRow(rowData: string, sectionID: number, rowID: number) { 
    return (
     <View> 
     <Text>{sectionID.Name}</Text> 
     </View> 
    ) 
} 

renderSectionHeader(sectionData, category) { 
    return (
    <View> 
     <Text>{category}</Text> 
    </View> 
) 
} 

我如何能實現我想要什麼？

Answer 1

您可以使用cloneWithRows將您的JSON直接映射到您的listview數據源。每個景點將自動傳遞到您的renderRow功能。

const myjson = ... 

export default class Test extends Component { 

    constructor(props) { 
    super(props); 
    this.state = { 
     dataSource: new ListView.DataSource({ 
     rowHasChanged: (row1, row2) => row1 !== row2, 
     }), 
    }; 
    } 

    componentDidMount() {  
    this.setState({ 
     dataSource: this.state.dataSource.cloneWithRows(myjson.ZoneInfo.AttractionsInfo) 
    }); 
    } 

    renderRow(attraction) { 
     return (
     <View> 
      <Text>{attraction.Name}</Text> 
     </View> 
    ) 
    } 

    renderSectionHeader() { 
    return (
     <View> 
      <Text>{myjson.ZoneInfo.Name}</Text> 
     </View> 
    ) 
    } 

    render() { 
    return (
     <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center',}}> 
     <ListView      
      dataSource={this.state.dataSource} 
      renderRow={this.renderRow.bind(this)} 
      renderHeader={this.renderSectionHeader.bind(this)} 
      enableEmptySections={true} 
     /> 
     </View> 
    ); 
    } 
}