何がフラットリストですか?どのように反応するネイティブリストでフラットリストを使用しますか

配列上のマップ関数を使用して項目の一覧を表示するのではなく、その配列の各項目に対していくつかのJSXを返し、ScrollViewの内部に埋め込むことによって、そのリストの上下をスクロールできます.
任意の条件で使用する方が良いリストを表示する別の方法は、フラットリストです.フラットリストでは、我々はスクロールリストを上下にスクロールする機能が付属していますので、我々はScrollViewを使用する必要はありませんので、我々はそれをインポートする代わりに取り除く.

使用方法
まず第一に、我々はflatlistコンポーネントを必要とします.オープニングと終了タグはありません.flatListは自己閉鎖コンポーネントです.そしてここで我々のリストがどのように動作するかを制御する小道具の異なる数を持っている.最初の小道具は以下の通りです:
1 .データ
データ小道具は、我々が示したいデータを指定します.データを配列として渡す必要があります.例えば
2 .レンダリング項目
このプロップは機能になります.今、この関数はいくつかのJSXを配列内のいくつかの項目で返しますe.g. <Flatlist. renderItem={({item})=>(
return(<Text>{people.name}</Text>)
)} />Numcolumns :
NumColumn小道具は、複数の列でデータを表示するために使用されます.
4 .水平
このpropがtrueであるならば、データは水平に表示されます.
5 .キー抽出器:
これは、指定された項目のリスト内の一意の値を指定するために使用されます.
6 . listheAderComponent :
このプロップはアイテムの一番上に表示されます
7 ListFooterComponent :
このプロップはアイテムの最後に表示される
8 .リフレッシュ
リフレッシュする新しいデータを待っている間にtrueを設定する
実装

import React from "react";
import { StyleSheet, Text, View, FlatList } from "react-native";
const Person = [
  {
    id: "1",
    name: "Alex"
  },
  {
    id: "2",
    name: "Michel"
  },
  {
    id: "3",
    name: "Robert"
  },
  {
    id: "4",
    name: "William"
  },
  {
    id: "5",
    name: "James"
  }
];

const Item = ({ title }) => {
  return (
    <View style={styles.item}>
      <Text>{title}</Text>
    </View>
  );
};

export default function App() {
  const renderItem = ({ item }) => (
    <Item style={styles.text} title={item.name} />
  );
  return (
    <View style={styles.container}>
      <FlatList
        data={Person}
        renderItem={renderItem}
        keyExtractor={(item) => item.id}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    marginTop: 30,
    padding: 2
  },
  item: {
    backgroundColor: "green",
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16
  },
  text: {
    color: "red"
  }
});

コード出力: