我想在我的react-native应用程序的Flatlis组件中显示Json数据,但我不知道如何显示它。我想在列表中显示恐龙的名称,如果我按列表项,我想显示恐龙的尺寸。 我已经设置了列表项和详细信息屏幕,但使用此代码时出现空白屏幕,我是否以错误的方式导入了 JSON 数据,或者我是否必须以某种方式重组数据才能显示它?
我有这样的 JSON 数据:
{
"lambeosaurus": {
"dimensions": {
"height": 2.1,
"length": 12.5,
"weight": 5000
}
},
"stegosaurus": {
"dimensions": {
"height": 4,
"length": 9,
"weight": 2500
}
}
}
这是我的代码:
import React from 'react'
import { StyleSheet, Text, View, TouchableOpacity, StatusBar, FlatList, Image } from 'react-native'
import MyListItem from '../components/MyListItem'
const data = require("../data/MockData.json")
class HomeScreen extends React.Component {
render() {
return (
<View>
<StatusBar hidden={true} />
<FlatList
data={data}
renderItem={({ item }) =>
<MyListItem
item={item}
onPress={() => {
this.props.navigation.navigate('Details', {
item: item
})
}}
/>
}
/>
</View>
);
}
}
export default HomeScreen;
最佳答案
FlatList
需要一个数组作为 data
属性,但您的 JSON 是一个对象。您可以在使用之前将其更改为数组。
// const objData = require("../data/MockData.json");
const objData = {
lambeosaurus: {
dimensions: {
height: 2.1,
length: 12.5,
weight: 5000
}
},
stegosaurus: {
dimensions: {
height: 4,
length: 9,
weight: 2500
}
}
};
const data = Object.keys(objData).map(key => ({
key,
...objData[key]
}));
console.log(data);
关于json - 在平面列表中显示 JSON 数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53141535/