如何从 json 文件中读取数据并使用它在 react native 的视图组件中显示？

Question

我需要在单独的 FlatList 和其中的课程内容中显示“评分最高”，就像 udemy 如何显示其内容一样。但是我是 react native 的新手，从来没有做过这样的应用程序，所以我不知道如何从 JSON 文件中获取数据，然后像这样显示它。

json 文件：https://drive.google.com/file/d/1l9J34syhsly7S43OzGar4RQN3d6g_yZn/view?usp=sharing

我还附上了 UI 图片来解释我想说什么以及我想如何显示我的 json 数据。

const Data = require("../Data/static_courses_data.json");
const CategoriesScreen = (props) => {
  const renderGridItem = (itemData) => {
    return (
      <CategoryGrid
        title={itemData.item["Title"]}
        imgUrl={itemData.item["image-url"]}
        onSelect={}
      ></CategoryGrid>
    );
  };
  return (
    <View>
      <FlatList data={Data} renderItem={renderGridItem} numColumns={2} />
    </View>
  );
};

我也试过这样，但它给了我一个错误说Object is not a constructor(evaluating 'new_meal.default)

Answer 1

把它做成一个JS文件并像这样导出数据：

data.js

const data = [
  { some: "data" }, 
  { other: "data" },
  ...
  ...
];

export default data;

然后像任何其他 JS 文件一样将其导入到您想要使用的位置。

SomeReactNativeComponent.js

import data from './path/to/data.js'
// ... other imports

const SomeReactNativeComponent = ( props ) => {
...

// component functions

...

}

编辑，OP 请求的方法：

fetch("./path/to/static_courses_data.json")
  .then(response => response.json())
  .then(json => console.log(json));

Answer 2

通过直接导入您的 .json 文件，您可以执行以下操作，但是这些项目不会根据您的具体情况按类别分隔。我只是以所有标题为例。

首先您使用Object.keys 从您的Top Rated 获取所有密钥，然后使用Object.values 获取它们的值

此链接可能会有所帮助：https://www.samanthaming.com/tidbits/76-converting-object-to-array/

import React, {useEffect, useState} from 'react';
import {View, Text, FlatList} from 'react-native';

import data from './data.json';

const App = () => {
  const [filteredItems, setFilteredItems] = useState([]);
  const [categories, setCategories] = useState();

  useEffect(() => {
    setFilteredItems([]);
    setCategories(Object.keys(data['Top Rated']));
  }, []);

  useEffect(() => {
    if (categories) {
      categories.map(category => {
        setFilteredItems(prevState => [
          ...prevState,
          Object.values(
            data['Top Rated'][`${category}`].map(item => `${item.Title}\n`),
          ),
        ]);
      });
    }
  }, [categories]);

  return (
    <View style={{flex: 1}}>
      <FlatList
        data={filteredItems}
        renderItem={({item}) => <Text>{`${item}\n`}</Text>}
      />
    </View>
  );
};

export default App;