React-Native ListView中的JSON解析

我有这个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>
  )
}

}
renderRow（rowData:string，sectionID:number，rowID:number）{
返回(
{sectionID.Name}
)
}
renderSectionHeader（截面数据，类别）{
返回(
{类别}
)
}

---

如何实现我想要的？

您可以使用

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>
    );
  }
}

constmyjson=。。。
导出默认类测试扩展组件{
建造师（道具）{
超级（道具）；
此.state={
数据源：新建ListView.dataSource({
行已更改：（行1，行2）=>行1！==行2，
}),
};
}
componentDidMount（）{
这是我的国家({
dataSource:this.state.dataSource.cloneWithRows（myjson.ZoneInfo.AttractionsInfo）
});
}
renderRow（景点）{
返回(
{attraction.Name}
)
}
renderSectionHeader（）{
返回(
{myjson.ZoneInfo.Name}
)
}
render（）{
返回(
);
}
}

this.state.dataSource在您的代码中是什么样子的？你如何定义它的价值？请把密码寄出去。