Khóa học react-native

FlatList trong React Native

0 phút đọc

FlatList là một trong những thành phần quan trọng và phổ biến nhất trong React Native, được sử dụng để hiển thị danh sách các mục một cách hiệu quả. FlatList được thiết kế để xử lý các danh sách dài một cách mượt mà và hiệu quả, giúp tối ưu hóa hiệu suất của ứng dụng di động. Trong bài viết này, chúng ta sẽ tìm hiểu chi tiết về cách sử dụng FlatList, các thuộc tính quan trọng, và các kỹ thuật tối ưu hóa, cùng với các ví dụ cụ thể.

Cú Pháp Cơ Bản

Để sử dụng FlatList trong React Native, bạn cần import nó từ thư viện react-native và sử dụng nó như một thành phần trong ứng dụng của bạn.

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

const data = [
  { id: "1", text: "Item 1" },
  { id: "2", text: "Item 2" },
  { id: "3", text: "Item 3" },
];

const App = () => {
  return (
    <View style={styles.container}>
      <FlatList
        data={data}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => <Text style={styles.item}>{item.text}</Text>}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  item: {
    padding: 20,
    fontSize: 18,
    height: 44,
  },
});

export default App;

Các Thuộc Tính Quan Trọng của FlatList

data

Thuộc tính data xác định nguồn dữ liệu cho FlatList. Đây là một mảng các đối tượng chứa dữ liệu mà bạn muốn hiển thị.

Ví dụ:

const data = [
  { id: "1", text: "Item 1" },
  { id: "2", text: "Item 2" },
  { id: "3", text: "Item 3" },
];

renderItem

Thuộc tính renderItem xác định cách mỗi mục trong danh sách được hiển thị. Nó nhận một đối tượng chứa mục dữ liệu và trả về một thành phần React để hiển thị mục đó.

Ví dụ:

const renderItem = ({ item }) => <Text style={styles.item}>{item.text}</Text>;

keyExtractor

Thuộc tính keyExtractor xác định cách lấy khóa duy nhất cho mỗi mục trong danh sách. Điều này giúp React Native xác định các mục nào cần được cập nhật.

Ví dụ:

const keyExtractor = (item) => item.id;

horizontal

Thuộc tính horizontal xác định liệu FlatList có cuộn theo chiều ngang hay không. Mặc định là false.

Ví dụ:

<FlatList
  data={data}
  renderItem={renderItem}
  keyExtractor={keyExtractor}
  horizontal
/>

onEndReached

Thuộc tính onEndReached là một hàm callback được gọi khi người dùng cuộn đến cuối danh sách. Điều này thường được sử dụng để tải thêm dữ liệu.

Ví dụ:

const loadMoreData = () => {
  // Tải thêm dữ liệu
};

<FlatList
  data={data}
  renderItem={renderItem}
  keyExtractor={keyExtractor}
  onEndReached={loadMoreData}
  onEndReachedThreshold={0.5}
/>;

refreshing và onRefresh

Thuộc tính refreshing xác định liệu danh sách có đang được làm mới hay không, và onRefresh là một hàm callback được gọi khi người dùng kéo để làm mới danh sách.

Ví dụ:

const [refreshing, setRefreshing] = useState(false);

const onRefresh = () => {
  setRefreshing(true);
  // Làm mới dữ liệu
  setRefreshing(false);
};

<FlatList
  data={data}
  renderItem={renderItem}
  keyExtractor={keyExtractor}
  refreshing={refreshing}
  onRefresh={onRefresh}
/>;

Ví Dụ Chi Tiết về FlatList

Ví Dụ 1: Tạo FlatList Cơ Bản

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

const data = [
  { id: "1", text: "Item 1" },
  { id: "2", text: "Item 2" },
  { id: "3", text: "Item 3" },
];

const App = () => {
  return (
    <View style={styles.container}>
      <FlatList
        data={data}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => <Text style={styles.item}>{item.text}</Text>}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  item: {
    padding: 20,
    fontSize: 18,
    height: 44,
  },
});

export default App;

Ví Dụ 2: Tạo FlatList với Màu Sắc Tùy Chỉnh

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

const data = [
  { id: "1", text: "Item 1" },
  { id: "2", text: "Item 2" },
  { id: "3", text: "Item 3" },
];

const App = () => {
  return (
    <View style={styles.container}>
      <FlatList
        data={data}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <View style={styles.itemContainer}>
            <Text style={styles.item}>{item.text}</Text>
          </View>
        )}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  itemContainer: {
    backgroundColor: "#f9c2ff",
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  item: {
    fontSize: 18,
  },
});

export default App;

Ví Dụ 3: Tạo FlatList với Chức Năng Kéo Để Làm Mới

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

const data = [
  { id: "1", text: "Item 1" },
  { id: "2", text: "Item 2" },
  { id: "3", text: "Item 3" },
];

const App = () => {
  const [refreshing, setRefreshing] = useState(false);

  const onRefresh = () => {
    setRefreshing(true);
    // Làm mới dữ liệu
    setTimeout(() => {
      setRefreshing(false);
    }, 2000);
  };

  return (
    <FlatList
      data={data}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => (
        <View style={styles.itemContainer}>
          <Text style={styles.item}>{item.text}</Text>
        </View>
      )}
      refreshControl={
        <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
      }
    />
  );
};

const styles = StyleSheet.create({
  itemContainer: {
    backgroundColor: "#f9c2ff",
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  item: {
    fontSize: 18,
  },
});

export default App;

Các Kỹ Thuật Tối Ưu Hóa FlatList

Sử Dụng keyExtractor

Sử dụng keyExtractor để cung cấp khóa duy nhất cho mỗi mục trong danh sách, giúp React Native xác định các mục nào cần được cập nhật.

Ví dụ:

const keyExtractor = (item) => item.id;

Tránh Sử Dụng Hàm Inline

Tránh sử dụng các hàm inline cho thuộc tính renderItem để tránh việc tạo lại hàm mỗi khi component được render.

Ví dụ:

const renderItem = ({ item }) => <Text style={styles.item}>{item.text}</Text>;

<FlatList data={data} renderItem={renderItem} keyExtractor={keyExtractor} />;

Sử Dụng getItemLayout

Nếu tất cả các mục trong danh sách có cùng chiều cao, sử dụng thuộc tính getItemLayout để tối ưu hóa hiệu suất cuộn.

Ví dụ:

const ITEM_HEIGHT = 44;

const getItemLayout = (data, index) => ({
  length: ITEM_HEIGHT,
  offset: ITEM_HEIGHT * index,
  index,
});

<FlatList
  data={data}
  renderItem={renderItem}
  keyExtractor={keyExtractor}
  getItemLayout={getItemLayout}
/>;

Sử Dụng PureComponent hoặc React.memo

Sử dụng PureComponent hoặc React.memo để tránh việc render lại không cần thiết của các mục trong danh sách.

Ví dụ:

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

const Item = memo(({ text }) => (
  <View style={styles.itemContainer}>
    <Text style={styles.item}>{text}</Text>
  </View>
));

const renderItem = ({ item }) => <Item text={item.text} />;

<FlatList data={data} renderItem={renderItem} keyExtractor={keyExtractor} />;

Các Hạn Chế của FlatList Component

Mặc dù FlatList component trong React Native rất mạnh mẽ, nhưng nó cũng có một số hạn chế:

  1. Hiệu Suất: Khi sử dụng quá nhiều FlatList lồng nhau, hiệu suất của ứng dụng có thể bị ảnh hưởng.
  2. Khả Năng Tái Sử Dụng: Việc sử dụng inline styles có thể làm giảm khả năng tái sử dụng các thành phần.
  3. Quản Lý Sự Kiện: FlatList không hỗ trợ tất cả các sự kiện như các thành phần khác, ví dụ như sự kiện hover.

Kết Luận

FlatList là một thành phần cơ bản và quan trọng trong React Native, giúp bạn tạo ra các giao diện người dùng mượt mà và hiệu quả. Bằng cách hiểu rõ các thuộc tính và cách sử dụng FlatList, bạn có thể tạo ra các giao diện người dùng mượt mà và hiệu quả. Hy vọng qua bài viết này, bạn đã có thể nắm bắt được cách sử dụng FlatList trong React Native và áp dụng vào các dự án của mình.

Avatar
Được viết bởi

TechMely Team

Gợi ý câu hỏi phỏng vấn

entry

React Native là gì?

entry

What is React Native?

entry

List some benefits of using React Native for building mobile apps?

Bình luận

Chưa có bình luận nào

Chưa có bình luận nào