在flatlist中显示JSON数据

我想在react原生应用程序的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;

从“React”导入React
从“react native”导入{样式表、文本、视图、TouchableOpacity、状态栏、平面列表、图像}
从“../components/MyListItem”导入MyListItem
const data=require（“../data/MockData.json”）
类主屏幕扩展了React.Component{
render（）{
返回(
{
this.props.navigation.navigate（'Details'{
项目：项目
})
}}
/>
}
/>
);
}
}
导出默认主屏幕；

FlatList

需要一个数组作为

data

prop，但JSON是一个对象。您可以在使用它之前将其更改为数组

//const objData=require（“../data/MockData.json”）；
常量objData={
蓝龙：{
尺寸：{
身高：2.1，
长度：12.5，
重量：5000
}
},
剑龙：{
尺寸：{
身高：4，
长度：9，
重量：2500
}
}
};
const data=Object.keys（objData.map）（key=>({
钥匙
…objData[键]
}));
控制台日志（数据）