Buổi 03 — Thực hành: Dựng khung TaskFlow với Expo Router

Kết thúc buổi, app có bốn tab chạy bằng Expo Router, bấm vào công việc mở được màn hình chi tiết theo id, dashboard và danh sách công việc có thể lọc.
Chuẩn bị:
  • Project TaskFlow từ buổi 2 (đã có React Native Paper, theme và TaskCard)
  • Đã lưu mốc Git cuối buổi 2

Lab 3.1 — Xem cấu trúc hiện tại

Trước khi sửa, hỏi AI để biết project đang có gì:
Ghi lại: thư mục màn hình nằm ở src/app/ hay app/, và tab đang dùng Tabs hay NativeTabs.

Lab 3.2 — Dựng bốn tab bằng Expo Router

Kiểm tra lại bằng cây thư mục: có đúng 4 file trong (tabs)/ và file task/[id].tsx chưa? Bấm lần lượt 4 tab trên điện thoại.
Nếu AI cài thêm @react-navigation/bottom-tabs hoặc tạo NavigationContainer, đó là cách làm của React Navigation thuần — không cần với Expo Router. Yêu cầu AI hoàn tác và dùng Tabs từ expo-router.

Lab 3.3 — Màn hình chi tiết động

Để kiểm tra trường hợp không tìm thấy, tạm thêm một nút gọi router.push('/task/khong-ton-tai') ở tab Tổng quan. Kiểm tra xong thì xóa nút này.

Lab 3.4 — Dựng dashboard

Lab 3.5 — Danh sách và bộ lọc

Kiểm tra luồng đi sâu:
  1. Chọn bộ lọc Đang làm, cuộn xuống giữa danh sách
  2. Bấm một công việc → màn hình chi tiết mở, không còn thanh tab, header có nút quay lại
  3. Bấm quay lại → về đúng tab Công việc, bộ lọc Đang làm và vị trí cuộn vẫn giữ nguyên

Lab 3.6 — Trạng thái trống

Khi bộ lọc không có kết quả, hiện thông báo rõ và nút Xóa bộ lọc.

Lab 3.7 — Lưu mốc

Lưu mốc Git: Thêm Expo Router, dashboard và danh sách công việc.

Checklist hoàn thành

  • Cấu trúc thư mục có (tabs)/ với 4 file và task/[id].tsx
  • Bốn tab chuyển đúng màn hình, có icon
  • Bấm công việc mở đúng chi tiết theo id, có nút quay lại
  • Quay lại giữ nguyên bộ lọc và vị trí cuộn
  • Số liệu dashboard khớp dữ liệu
  • Tìm kiếm và năm bộ lọc hoạt động
  • Trạng thái trống có cách khôi phục
Buổi 04 sẽ hoàn thiện màn hình chi tiết, thêm form cập nhật và theo dõi lịch sử công việc.