Img bai 1 (31/12/2024) : 
Img bai custom component (7/1/2025) : 
Img bai FlatList (7/1/2025) : 
Img bai Section (14/1/2025) : 
- Mục đích sử dụng: FlatList:
Dùng để hiển thị danh sách các mục đơn giản, không phân nhóm. Phù hợp khi cần hiển thị một danh sách tuyến tính các mục, như danh sách sản phẩm, danh bạ điện thoại, danh sách tin nhắn, v.v. Sử dụng khi mỗi mục trong danh sách có cấu trúc giống nhau. SectionList:
Dùng để hiển thị danh sách các mục được phân nhóm. Thích hợp khi cần hiển thị danh sách có cấu trúc phức tạp hơn với các nhóm và tiêu đề nhóm, như danh sách mục lục, danh sách thành viên theo phòng ban, danh sách bài hát theo album, v.v. Sử dụng khi có nhiều nhóm mục với tiêu đề nhóm khác nhau. 2. Cấu trúc dữ liệu: FlatList:
Nhận một mảng đơn giản của các đối tượng làm dữ liệu đầu vào. Mỗi đối tượng trong mảng đại diện cho một mục trong danh sách. const products = [ { id: '1', name: 'Product A', price: '10.00' }, { id: '2', name: 'Product B', price: '15.00' }, { id: '3', name: 'Product C', price: '20.00' }, ]; Dữ liệu đơn giản và trực tiếp hơn SectionList. SectionList:
Nhận một mảng các đối tượng, mỗi đối tượng đại diện cho một nhóm và có thuộc tính title và data. data là một mảng chứa các mục của nhóm đó. const groupedProducts = [ { title: 'Category A', data: ['Product A1', 'Product A2', 'Product A3'] }, { title: 'Category B', data: ['Product B1', 'Product B2'] }, { title: 'Category C', data: ['Product C1', 'Product C2', 'Product C3'] }, ]; Dữ liệu phức tạp hơn và có tổ chức theo nhóm. 3. Hiệu năng: FlatList:
Được tối ưu hóa để hiển thị danh sách dài một cách hiệu quả bằng cách chỉ render các mục trong tầm nhìn và tải thêm khi cuộn. Sử dụng cơ chế phân trang (pagination) để cải thiện hiệu năng. Thích hợp cho danh sách có hàng nghìn mục mà không gây ảnh hưởng lớn đến hiệu năng. SectionList:
Cũng được tối ưu hóa cho danh sách dài, nhưng có thêm phức tạp do phải quản lý các nhóm và tiêu đề nhóm. Có cơ chế tương tự để render các mục trong tầm nhìn và tải thêm khi cần. Khi sử dụng với danh sách phân nhóm, SectionList cung cấp trải nghiệm người dùng tốt hơn nhờ các tiêu đề nhóm và khả năng cuộn mượt mà giữa các nhóm. 4. Tính dễ sử dụng: FlatList:
Dễ sử dụng cho các danh sách đơn giản không phân nhóm. Chỉ cần cung cấp dữ liệu dưới dạng một mảng và khai báo cách render từng mục. Ví dụ: <FlatList data={products} renderItem={({ item }) => ( {item.name} {item.price} )} keyExtractor={item => item.id} /> SectionList:
Cần cấu hình nhiều hơn do phải quản lý các nhóm và tiêu đề nhóm. Phức tạp hơn FlatList do cần xử lý nhiều nhóm và mục trong từng nhóm. Ví dụ: <SectionList sections={groupedProducts} renderItem={({ item }) => {item}} renderSectionHeader={({ section: { title } }) => {title}} keyExtractor={(item, index) => item + index} /> Tóm lại, FlatList là lựa chọn tốt khi bạn cần hiển thị một danh sách tuyến tính đơn giản, trong khi SectionList phù hợp hơn cho các danh sách có cấu trúc phân nhóm phức tạp. Cả hai đều cung cấp hiệu năng tốt và có cơ chế render hiệu quả, nhưng FlatList có thể dễ sử dụng hơn nếu danh sách của bạn không phân nhóm.
Img bai 4 : State 11/2/2025
Img bai 5 : OnTap State - ValidateForm 18/2/2025
Img bai 6 : Navigation 25/2/2025
Img Bai 7 : Bottom Tab + Stack Tab + Context 4/3/2025
Img KiemTra 1 : Design 2 screen
Img Bai 9 : AsyncStorage + Stack + Bottom Tab 18/3/2025
Img BaiTH 1 : 28/3/2025 Restaurant App
Img BaiTH 2 : 31/3/2025 Nectar App
Img Bai 10 : AsyncStorage 1/4/2025
Img TH 3 : 2/4/2025 Nectar App P2
Img TH 4 : Nectar App P3
Img Bai 11 : API
