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

Question

I send request to my API and it return response that i convert it to JSON as below

now i want to display this JSON in FlaList

I'm Trying to do this but it doesn't display anything

<FlatList

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

Answer 1

you need to put Text tag inside a View Tag and also 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>
  )
 }
}