MMA301 - Chương 3: Danh sách với FlatList và SectionList

Để áp dụng thành công FlatList vào việc hiển thị danh sách các mục một cách hiệu quả, bạn cần hiểu rõ về cách sử dụng nó. FlatList là một thành phần được thiết kế để hiển thị danh sách các mục một cách hiệu quả, đặc biệt là khi danh sách có số lượng lớn các mục. Để sử dụng FlatList, bạn cần định nghĩa một hàm renderItem tùy chỉnh và truyền nó vào FlatList. Hàm renderItem này sẽ chịu trách nhiệm hiển thị mỗi mục trong danh sách một cách độc lập. Điều này cho phép bạn có thể tùy chỉnh cách hiển thị mỗi mục một cách linh hoạt.

FlatList là một thành phần trong React Native được sử dụng để hiển thị một danh sách lớn các mục có thể cuộn. Mục đích chính của FlatList là để hiển thị một lượng lớn nội dung có thể cuộn, giúp người dùng dễ dàng xem và tương tác với các mục trong danh sách. FlatList được thiết kế để hiệu suất cao và có thể xử lý lượng dữ liệu lớn mà không gặp sự cố. Nó cũng cung cấp các tính năng như khả năng cuộn tự động, khả năng tải thêm dữ liệu khi người dùng cuộn đến cuối danh sách, v.v. Tóm lại, FlatList là một thành phần quan trọng trong React Native giúp người dùng dễ dàng xem và tương tác với các mục trong danh sách.

SectionList trong React cho phép bạn render từng phần tử trong danh sách của mình bằng cách sử dụng phương thức renderSectionHeader và renderItem. Phương thức renderSectionHeader được sử dụng để render tiêu đề của từng phần tử, trong khi renderItem được sử dụng để render nội dung của từng phần tử. Điều này cho phép bạn có thể tùy chỉnh cách mà danh sách của mình được hiển thị trên màn hình.

Trong khi sử dụng FlatList để hiển thị danh sách các item, bạn cần phải cung cấp một hàm key extractor để xác định mỗi item trong danh sách. Hàm này sẽ nhận vào một item và trả về một giá trị duy nhất để xác định item đó. Trong React Native, bạn có thể sử dụng prop keyExtractor của FlatList để chỉ định hàm key extractor. Hàm này sẽ được gọi cho mỗi item trong danh sách và sẽ trả về một giá trị duy nhất để xác định item đó. Ví dụ, nếu bạn có một danh sách các item có id, bạn có thể sử dụng hàm key extractor để trả về id của mỗi item.

Trong React Native, khi sử dụng FlatList để hiển thị danh sách dữ liệu, bạn cần chỉ định nguồn dữ liệu cho danh sách. Prop được sử dụng để chỉ định nguồn dữ liệu này là 'data'. Prop này được sử dụng để truyền dữ liệu từ ứng dụng vào FlatList, giúp ứng dụng có thể hiển thị danh sách dữ liệu một cách hiệu quả. Ngoài ra, bạn cũng có thể sử dụng các prop khác như 'items', 'dataSource', 'source' để chỉ định nguồn dữ liệu, nhưng 'data' là lựa chọn phổ biến và được khuyến nghị sử dụng.

Trong React Native, khi sử dụng FlatList để hiển thị danh sách các item, bạn có thể tùy chỉnh hướng sắp xếp của các item này bằng cách sử dụng thuộc tính layout. Tuy nhiên, thuộc tính này không phải là một thuộc tính trực tiếp của FlatList mà là thuộc tính của một thành phần con được sử dụng trong FlatList. Để cụ thể hơn, bạn có thể sử dụng thuộc tính horizontal của thành phần FlatList để sắp xếp các item theo chiều ngang.

Trong React Native, khi sử dụng FlatList để hiển thị danh sách dữ liệu, bạn có thể tùy chỉnh cách hiển thị từng mục trong danh sách bằng cách sử dụng một trong các thuộc tính sau: renderItem, renderComponent, itemComponent, listRenderer. Tuy nhiên, thuộc tính chính và được sử dụng rộng rãi nhất để tùy chỉnh cách hiển thị từng mục trong danh sách là renderItem. Với renderItem, bạn có thể sử dụng một hàm để trả về một thành phần JSX sẽ được sử dụng để hiển thị từng mục trong danh sách. Hàm này sẽ nhận vào một đối tượng có chứa dữ liệu của từng mục và một số thuộc tính khác như index, separators, v.v. Từ đó, bạn có thể tùy chỉnh cách hiển thị dữ liệu của từng mục theo ý muốn của mình.

Mục đích của phần tử SectionList là để hiển thị một danh sách các mục được tổ chức thành các phần. Nó cho phép người dùng dễ dàng phân loại và tìm kiếm thông tin. SectionList thường được sử dụng trong các ứng dụng di động để hiển thị danh sách các mục được sắp xếp theo thứ tự, chẳng hạn như danh sách các bài viết, danh sách các sản phẩm hoặc danh sách các sự kiện. Nó cung cấp một giao diện người dùng thân thiện và dễ sử dụng, giúp người dùng dễ dàng tìm kiếm và truy cập thông tin.

Prop renderSectionHeader được sử dụng để tạo tiêu đề cho từng phần trong một danh sách SectionList hoặc FlatList. Nó là một hàm có thể được sử dụng để tùy chỉnh cách hiển thị tiêu đề cho từng phần. Hàm này nhận một phần từ mảng sections và trả về một thành phần React. Điều này cho phép bạn tạo ra các tiêu đề tùy chỉnh cho từng phần, chẳng hạn như tiêu đề có thể được tùy chỉnh dựa trên dữ liệu của phần. Việc sử dụng renderSectionHeader giúp bạn có thể tạo ra các danh sách có giao diện người dùng tùy chỉnh và hấp dẫn hơn.

SectionList là một thành phần trong React Native cho phép người dùng hiển thị danh sách các phần tử. Khi sử dụng SectionList, mỗi phần tử trong danh sách sẽ được render theo một cách nhất định. Trong trường hợp này, chúng ta cần chọn hai phương thức render cho SectionList. Theo mặc định, SectionList sẽ render mỗi phần tử trong danh sách theo phương thức renderItem. Tuy nhiên, chúng ta cũng có thể render phần đầu của mỗi phần tử theo phương thức renderSectionHeader. Điều này cho phép người dùng tùy chỉnh giao diện của SectionList theo ý muốn.

Trong FlatList của React Native, có một số cách để render mỗi mục trong danh sách. Tuy nhiên, có một prop được sử dụng phổ biến nhất để thực hiện việc này. Prop đó là renderItem. Nó được sử dụng để chỉ định một hàm sẽ được gọi để render mỗi mục trong danh sách. Hàm này sẽ nhận vào một đối tượng có chứa thông tin của mỗi mục và sẽ trả về một thành phần sẽ được render. Ví dụ, bạn có thể sử dụng renderItem để render một danh sách các item có chứa tên, ảnh và thông tin khác nhau. Ngoài ra, bạn cũng có thể sử dụng renderItem để render một danh sách các item có chứa các thành phần khác nhau như text, hình ảnh, nút bấm, v.v. Tóm lại, renderItem là một prop quan trọng trong FlatList và được sử dụng để render mỗi mục trong danh sách.

Nếu bạn đặt dữ liệu (data prop) của FlatList thành null hoặc undefined, thì nó sẽ không ném lỗi và không gây ra sự cố. Thay vào đó, nó sẽ không hiển thị bất kỳ mục nào trong danh sách. Điều này xảy ra vì FlatList được thiết kế để xử lý dữ liệu không xác định hoặc không tồn tại mà không gây ra lỗi. Tuy nhiên, nếu bạn muốn hiển thị thông báo hoặc placeholder khi dữ liệu không tồn tại, bạn có thể sử dụng thuộc tính renderItem để tạo ra một thành phần placeholder khi dữ liệu không có.