Apakah komponen FlatList dan cara menggunakannya dalam React Native?

FlatList ialah bekas yang boleh digunakan untuk memuatkan item senarai. Ia menawarkan sokongan pengepala dan pengaki, sokongan berbilang lajur, penatalan menegak/mendatar, pemuatan malas dan banyak lagi.

Berikut ialah beberapa ciri penting FlatList-

Sokongan pemuatan menatal
• Keupayaan untuk melaraskan penatalan menggunakan sokongan🎜🎜
Sokongan pengepala dan pengaki
• Sokongan berbilang lajur
• Cross-platformPanggilan balik asas yang boleh dikonfigurasi#🎜 struktur 🎜#
• FlatList adalah seperti berikut -

<FlatList
data={DataContainer} renderItem={ yourenderItem} keyExtractor={item => item.id} />

FlatList dilaksanakan melalui komponen VirtualizedList, yang bertanggungjawab untuk memaparkan bilangan item terhad yang sesuai dengan port paparan semasa skrin mudah alih . Data selebihnya diberikan semasa pengguna menatal. Sifat asas seperti data dan renderItem boleh digunakan untuk mencipta FlatList.

Untuk menggunakan FlatList, anda perlu mengimportnya daripada React-Native seperti yang ditunjukkan di bawah-

import { FlatList} from "react-native";

Beberapa sifat penting FlatList disenaraikan di bawah-

#🎜 🎜 #

PropsPenerangan#🎜 ##🎜 #dataSuatu tatasusunan yang mengandungi data yang akan dipaparkan. renderItem({ item, indeks, seperator });#🎜## 🎜#item - Ia ialah item dalam medan data yang dipaparkan dalam format senarai. #🎜🎜 yang akan ##🎜🎜 akan dipaparkan pada kelas yang akan #🎜🎜 bahagian bawah semua item , fungsi rendering atau elemen rendering. Jika ditetapkan kepada benar, sifat ini akan memaparkan item secara mendatar. keyExtractorSaya memerlukan FlatList bersama-sama komponen lain seperti teks, paparan, helaian gaya, dsb. Mereka diimport seperti yang ditunjukkan di atas. Selepas import selesai, saya perlu memaparkan data dalam FlatList. Data disimpan dalam this.state.data seperti yang ditunjukkan di bawah-

import { FlatList , Text, View, StyleSheet } from "react-native";

Fungsi yang melaksanakan renderItemKomponen teks dibalut di dalam komponen paparan. item.isTitle ialah pembolehubah, semak untuk benar/salah dan tetapkannya kepada huruf tebal dengan sewajarnya dan tetapkan warna. Berikut ialah pelaksanaan FlatList dengan data dan sifat renderItem.

renderItem = ({ item }) => {
   return (
      <View style={styles.item}>
         <Text style={{ fontWeight: (item.isTitle) ? "bold" : "", color: (item.isTitle) ? "red" : "gray"}} >{item.name}</Text>
      </View>
   );
};

	#🎜#
	renderItem
	indeks - Setiap item mempunyai indeks. pemisah - ialah fungsi yang membantu dalam memaparkan prop. Fungsi yang ada ialah-#🎜🎜 ## 🎜🎜 ## 🎜🎜 r#🎜🎜 ## 🎜🎜 ## 🎜🎜 ## 🎜🎜 #List ##🎜 #Listem ##🎜 🎜🎜 #Kelas komponen, fungsi rendering atau elemen rendering yang akan dipanggil apabila senarai kosong. Komponen ini boleh membantu jika anda ingin melakukan beberapa tindakan apabila senarai kosong. ListFooterComponent #🎜🎜🎜🎜🎜 ListFooterComponent
	ListFooterComponentStyle#🎜#Gaya yang diperlukan untuk komponen yang diperlukan ditemui dalam Selesai di sini.
ListHeaderComponent	#, #fungsi rendering atau rendering ##🎜 Akan diberikan di atas semua item.
ListHeaderComponentStyle#🎜🎜🎜🎜	ListHeaderComponentStyle#🎜🎜🎜##🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜 ditemui di sini selesai.
mendatar
Mengekstrak kunci unik untuk indeks tertentu. Kunci ini digunakan untuk caching dan juga untuk menjejaki penyusunan semula item. (item: objek, indeks: nombor) => rentetan;
Contoh 1: Paparkan item dalam Senarai Rata secara menegak # 🎜🎜#Contoh ini menunjukkan cara FlatList berfungsi. Untuk menggunakan FlatList, mula-mula import komponen - strong> separators.highlight(), separators.unhighlight(), separators.updateProps().
Fungsi berikut bertanggungjawab untuk mendapatkan item dan memaparkan item yang sama dalam komponen teks , seperti yang ditunjukkan di bawah - this.state = { data: [ { name: "Javascript Frameworks", isTitle: true }, { name: "Angular", isTitle: false }, { name: "ReactJS", isTitle: false }, { name: "VueJS", isTitle: false }, { name: "ReactNative", isTitle: false }, { name: "PHP Frameworks", isTitle: true }, { name: "Laravel", isTitle: false }, { name: "CodeIgniter", isTitle: false }, { name: "CakePHP", isTitle: false }, { name: "Symfony", isTitle: false } ], stickyHeaderIndices: [] };	Untuk melaksanakan FlatList

this.state.data

diberi

data#🎜🎜🎜🎜🎜 atribut dan

>this.renderItem

fungsi diberikan kepada

renderItem

.

Berdasarkan data anda, anda boleh memberitahu sifat kunci yang akan menjadi satu-satunya dalam tatasusunan data dan harus memberikan nilai yang sama kepada props keyExtractor. Jika tidak diberikan, ia akan menganggap indeks tatasusunan sebagai nilai

key

. Jadi kami menganggap nama itu sebagai Kunci unik dan menetapkannya kepada keyExtractor.

<View style={styles.container}>
   <FlatList data={this.state.data} renderItem={this.renderItem} keyExtractor={item => item.name} />
</View>

Ini ialah kod lengkap untuk melaksanakan FlatList.

keyExtractor={item => item.name}

Output Contoh 2: Paparkan item dalam FlatList secara mendatar #🎟#🎜🎜🎜🎜🎜 projek, anda hanya menambah props Horizontal={true} pada komponen FlatList anda.

import React from "react";
import { FlatList , Text, View, StyleSheet, StatusBar } from "react-native";
export default class App extends React.Component {
   constructor() {
      super();
      this.state = {
         data: [
            { name: "Javascript Frameworks", isTitle: true },
            { name: "Angular", isTitle: false },
            { name: "ReactJS", isTitle: false },
            { name: "VueJS", isTitle: false },
            { name: "ReactNative", isTitle: false },
            { name: "PHP Frameworks", isTitle: true },
            { name: "Laravel", isTitle: false },
            { name: "CodeIgniter", isTitle: false },
            { name: "CakePHP", isTitle: false },
            { name: "Symfony", isTitle: false }
         ],
         stickyHeaderIndices: []
      };
   }
   renderItem = ({ item }) => {return ({item.name});};
render() {
   return ();
   }
}
const styles = StyleSheet.create({
   container: {
      flex: 1,
      marginTop: StatusBar.currentHeight || 0,
   },
   item: {
      margin: 10,
      padding: 20,
      marginVertical: 8,
      marginHorizontal: 16,
   }
});

OUTPUT

Atas ialah kandungan terperinci Apakah komponen FlatList dan cara menggunakannya dalam React Native?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!