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:
- Chọn bộ lọc Đang làm, cuộn xuống giữa danh sách
- 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
- 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
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.