React Native，Flatlist 显示来自同一元素的多个内容

Question

我是 React Native 和 Whosebug 的初学者。我有一个看起来像这样的数据库：

const DATA = [
  {
    id: "tomate",
    key: '1',
    title: 'La tomate',
    image1: require("./assets/tomate.png"),
    imageminiature: "./assets/tomate.png",
    link: "https://www.youtube.com,
  },
  {
    id: 'citrouille',
    key: '2',
    title: 'La citrouille',
    image1: require("./assets/citrouille.png"),
    imageminiature: "./assets/citrouille.png",
    link: "https://www.youtube.com,
  },
  {
    id: 'Poireau',
    key: '3',
    title: 'Le poireau',
    image1: require("./assets/poireau.png"),
    imageminiature: "./assets/poireau.png",
    link: "https://www.youtube.com",

  },
  {
    id: 'framboise',
    key: '4',
    title: 'la framboise',
    image1: require("./assets/framboise.png"),
    imageminiature: "./assets/framboise.png",
    link: "https://www.youtube.com",


  }
]

而且我想显示得到类似的东西:exemple of display 您可以在其中看到带有 link 的标题、图片和按钮。我已经每一次获得一次元素，但我希望所有元素都显示出来。我想使用 Flatlist，但如果需要，可以使用其他东西。我对 CSS 代码不感兴趣，但更多的是关于显示的想法。

感谢您的帮助亲切

Answer 1

有两种方法可以在列表中呈现数据

使用平面列表
在 Scrollview 中使用地图。

示例：

import {View, Flatlist, ScrollView} from 'react-native';
import React from 'react';

const  DATA  = [...Your data]

const Home = () => {
  const renderItem = () => {
    return <View>Your Component</View>;
  };

  return (
    <View>
      {/* option 1 to use Flatlist */}
      <Flatlist style={{flex: 1}} renderItem={renderItem} data={DATA} />
      {/* Opton 2 to map data insite Scrollview */}
      <ScrollView>{DATA.map(() => renderItem)}</ScrollView>
    </View>
  );
};

export default Home;

React Native，Flatlist 显示来自同一元素的多个内容

React Native , Flatlist diplay multiple things from the same element

react-native

display

react-native-flatlist