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

Question

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

现在我想在FlaList中显示此JSON

我正在尝试执行此操作，但没有显示任何内容

<FlatList

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

Answer 1

您需要将“文本”标签和“视图标签”都放在“视图标签”中

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