Thành phần FlatList là gì và cách sử dụng nó trong React Native?

FlatList là một vùng chứa có thể được sử dụng để tải các mục trong danh sách. Nó cung cấp hỗ trợ đầu trang và chân trang, hỗ trợ nhiều cột, đi kèm với cuộn dọc / ngang, tải chậm, v.v.

Dưới đây là một số tính năng quan trọng của FlatList -

• Đi kèm với tải cuộn
• Có thể điều chỉnh cuộn bằng cách sử dụng hỗ trợ ScrolltoIndex
• Đi kèm với hỗ trợ đầu trang và chân trang
• Hỗ trợ nhiều cột
• Nền tảng chéo
• Lệnh gọi lại khả năng xem có thể định cấu hình

Cấu trúc cơ bản của FlatList như sau -

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

FlatList được triển khai từ thành phần VirtualizedList đảm nhiệm việc hiển thị một số lượng hạn chế các mục sẽ phù hợp với cổng xem hiện tại của màn hình di động của bạn. Phần còn lại của dữ liệu được hiển thị khi người dùng cuộn. Các đạo cụ cơ bản như data và renderItem có thể được sử dụng để tạo FlatList.

Để làm việc với FlatList, bạn cần nhập nó từ react-native như sau -

import { FlatList} from "react-native";

Một số thuộc tính quan trọng của FlatList được liệt kê bên dưới -

separators.highlight(),
separators.unhighlight(),
separators.updateProps().

Ví dụ 1:Hiển thị các mục trong FlatList Vertical

Ví dụ cho thấy hoạt động của FlatList. Để làm việc với FlatList, trước tiên hãy nhập thành phần -

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

Tôi cần FlatList cũng như các thành phần khác như Text, View, StyleSheet, v.v. Các thành phần tương tự được nhập như hình trên.

Sau khi nhập xong, tôi cần hiển thị dữ liệu trong FlatList. Dữ liệu được lưu trữ bên trong this.state.data như hình dưới đây -

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: []
};

Để triển khai chức năng cho renderItem

Hàm bên dưới đảm nhận việc lấy mục và hiển thị tương tự trong thành phần Văn bản như hình bên dưới -

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

Thành phần Văn bản được bao bọc bên trong Thành phần Chế độ xem. Biến item.isTitle được kiểm tra xem nó có đúng / sai hay không và theo đó nó được tô đậm, cũng như màu sắc được cung cấp cho nó.

Để triển khai FlatList

Đây là triển khai FlatList có dữ liệu và các đạo cụ renderItem.

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

this.state.data được cấp cho dữ liệu đạo cụ và this.renderItem chức năng được chỉ định cho renderItem đạo cụ.

Dựa trên dữ liệu của bạn, bạn có thể cho biết thuộc tính khóa sẽ là một thuộc tính duy nhất từ ​​mảng dữ liệu và thuộc tính này sẽ được cấp cho props keyExtractor. Nếu không được cung cấp, nó sẽ coi chỉ mục mảng là key giá trị.

Vì vậy, chúng tôi đã coi tên là Khóa duy nhất và tên này được gán cho keyExtractor.

keyExtractor={item => item.name}

Đây là toàn bộ mã triển khai FlatList.

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 (<View style={styles.item}><Text style={{ fontWeight: (item.isTitle) ? "bold" : "", color: (item.isTitle) ? "red" : "gray"}} >{item.name}</Text></View>);};
render() {
   return (<View style={styles.container}><FlatList data={this.state.data} renderItem=   {this.renderItem} keyExtractor={item => item.name} stickyHeaderIndices={this.state.stickyHeaderIndices} /></View>);
   }
}
const styles = StyleSheet.create({
   container: {
      flex: 1,
      marginTop: StatusBar.currentHeight || 0,
   },
   item: {
      margin: 10,
      padding: 20,
      marginVertical: 8,
      marginHorizontal: 16,
   }
});

Đầu ra

Ví dụ 2:Hiển thị các mục trong FlatList theo chiều ngang

Để hiển thị các mục FlatList theo chiều ngang, bạn chỉ cần thêm các đạo cụ ngang ={true} vào thành phần FlatList của mình.

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 (<View style={styles.item}><Text style={{ fontWeight: (item.isTitle) ? "bold" : "", color: (item.isTitle) ? "red" : "gray"}} >{item.name}</Text></View>);};
   render() {
      return (<View style={styles.container}><FlatList horizontal={true}    data={this.state.data} renderItem={this.renderItem} keyExtractor={item => item.name}    stickyHeaderIndices={this.state.stickyHeaderIndices} /></View>);
   }
}
const styles = StyleSheet.create({
   container: {
      flex: 1,
      marginTop: 100,
   },
   item: {
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
      padding: 30,
      margin: 2,
      borderColor: '#2a4944',
      borderWidth: 1,
      height:100,
      backgroundColor: '#d2f7f1'
   }
});

Đầu ra