json - 如何在 FlatList React Native 中显示 JSON 数据

Question

我向我的 API 发送请求，它返回我将其转换为 JSON 的响应，如下所示

现在我想在 FlaList 中显示这个 JSON

我正在尝试这样做，但它没有显示任何内容

<FlatList

          data={this.state.dataSource}
          renderItem={({item}) => <Text> {item.Begin} </Text> }

标签： jsonreactjsreact-native

Answer 1

您需要将 Text 标签放在 View Tag 和 keyExtractor 中

 import React, { Component } from 'react';
 import { Platform, StyleSheet, Text, View, FlatList, Image, ScrollView, Picker } from 'react-native';

 export default class Test extends Component {
  constructor() {
  super();
   this.state = {
    data : [
    {"Begin" : "08:00:00" ,End : "08:10:00"},
    {"Begin" : "08:10:00" ,End : "08:20:00"},
    {"Begin" : "08:20:00" ,End : "08:30:00"},
    {"Begin" : "08:30:00" ,End : "08:40:00"},
    {"Begin" : "08:40:00" ,End : "08:50:00"},
    {"Begin" : "08:50:00" ,End : "08:60:00"},
  ]
  }
}

_keyExtractor = (item, index) => item.Begin.toString();

render() {

 return (
   <View style={{flex:1,justifyContent:'center'}}>
   <FlatList
   data={this.state.data}
   keyExtractor={this._keyExtractor}
   renderItem={({item}) => <Text> {item.Begin} </Text> }
   />
   </View>
  )
 }
}