отображение данных JSON в плоском списке - PullRequest
Новая
       2

отображение данных JSON в плоском списке

0 голосов
/ 04 ноября 2018

Я хочу отображать данные Json в компоненте Flatlis в своем приложении, но не могу понять, как их отобразить. Я хочу показать имя динозавра в списке, и если я нажму на элемент списка, я хочу показать размеры динозавра. У меня все элементы списка и экран сведений настроены, но я получаю пустой экран с этим кодом. Неправильно ли я импортировал данные 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;

1 Ответ

0 голосов
/ 04 ноября 2018

FlatList ожидает массив как data prop, но ваш 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);
...