Xây màn hình danh sách với FlatList trong React Native

Hầu hết app mobile đều có danh sách: danh sách bài viết, sản phẩm, tin nhắn, thông báo, user, đơn hàng. Trong React Native, component bạn nên học sớm là FlatList.

Người mới đôi khi dùng ScrollView rồi map toàn bộ item. Cách đó ổn với vài item, nhưng không phù hợp cho danh sách dài. FlatList được thiết kế để render danh sách hiệu quả hơn, chỉ ưu tiên những phần cần hiển thị trên màn hình.

FlatList cơ bản

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

const articles = [
  { id: '1', title: 'Làm quen với React Native' },
  { id: '2', title: 'Hiểu Props trong React Native' },
  { id: '3', title: 'State làm UI thay đổi' },
];

function ArticleListScreen() {
  return (
    <FlatList
      data={articles}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => (
        <View style={{ padding: 16 }}>
          <Text>{item.title}</Text>
        </View>
      )}
    />
  );
}

Ba prop quan trọng nhất là data, keyExtractor và renderItem. data là mảng dữ liệu. keyExtractor cho React biết mỗi item có định danh nào. renderItem mô tả cách render từng item.

Tách item thành component riêng

Khi UI của item dài hơn vài dòng, hãy tách thành component riêng. Điều này giúp list screen dễ đọc hơn.

function ArticleItem({ article }) {
  return (
    <View style={styles.card}>
      <Text style={styles.title}>{article.title}</Text>
      <Text style={styles.excerpt}>{article.excerpt}</Text>
    </View>
  );
}

function ArticleListScreen() {
  return (
    <FlatList
      data={articles}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => <ArticleItem article={item} />}
      contentContainerStyle={styles.content}
    />
  );
}

Empty state: khi không có dữ liệu

Một list tốt không chỉ biết hiển thị dữ liệu. Nó còn cần biết hiển thị gì khi dữ liệu rỗng. FlatList có prop ListEmptyComponent cho việc này.

<FlatList
  data={articles}
  keyExtractor={(item) => item.id}
  renderItem={({ item }) => <ArticleItem article={item} />}
  ListEmptyComponent={
    <View style={{ padding: 24, alignItems: 'center' }}>
      <Text>Chưa có bài viết nào</Text>
    </View>
  }
/>

Loading state

Khi gọi API, bạn thường có loading. Nếu đang tải dữ liệu, có thể hiển thị ActivityIndicator trước khi render list.

if (loading) {
  return <ActivityIndicator style={{ flex: 1 }} />;
}

Khi danh sách đã có dữ liệu và bạn muốn kéo để refresh, hãy tìm hiểu thêm refreshing và onRefresh.

Header, footer và separator

FlatList còn có ListHeaderComponent, ListFooterComponent và ItemSeparatorComponent. Những prop này giúp bạn thêm tiêu đề, loading cuối danh sách hoặc đường phân cách mà không cần nhét logic vào từng item.

Lỗi thường gặp

Lỗi đầu tiên là dùng index làm key cho danh sách có thể thay đổi thứ tự. Lỗi thứ hai là render item quá nặng. Lỗi thứ ba là quên empty/loading state. Lỗi thứ tư là bọc FlatList trong ScrollView cùng chiều cuộn, dễ gây cảnh báo và vấn đề performance.

Kết luận

FlatList là kỹ năng rất thực tế trong React Native. Hãy bắt đầu từ data, renderItem, keyExtractor, sau đó thêm empty, loading, refresh và pagination khi app cần. Một màn hình list tốt thường là nền cho rất nhiều màn hình khác trong app.

Nguồn tham khảo: React Native: FlatList, ScrollView, ActivityIndicator.