从JSON解析React Native列表视图数据

Question

这是我试图解析并在列表视图中显示的JSON。

我想在列表视图中显示的数据是ZoneInfo [“Name”]作为节标题。对于列表视图，将有3个文本显示Name，QueueTime或ShowTime。

我将JSON保存在状态变量中。

这是我一直试图从JSON中检索数据的代码。

{this.state.loading? <Spinner /> : <List dataArray={this.state.results.items} renderRow={(item) =>
    <ListItem>
      <Text>{item}</Text>
    </ListItem>
} />}

任何人都可以指导我如何解析JSON并在列表视图中显示它？

Answer 1

肯定有多种方法可以实现这一点，到目前为止，我很高兴以这种方式使用它：

我相信你会找到自己的方式;-)

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