Navigation trong React Native: stack, tabs và auth flow
Hướng dẫn thực tế về navigation trong React Native: stack, tabs, params, auth screens và cách giữ user flow rõ ràng.
Bài viết này dành cho người học NativePath và những ai đang xây mobile app thật. Trọng tâm là cách hiểu thực tế, không phải khẩu hiệu hay danh sách thuật ngữ rời rạc.
Vì sao chủ đề này quan trọng
Navigation không chỉ là chuyển màn hình. Nó tạo bản đồ tinh thần cho người dùng. Nếu stack, tabs và auth flow lộn xộn, UI đẹp vẫn gây khó hiểu. Trong React Native, navigation nên bắt đầu từ user journey: màn hình nào public, màn hình nào cần login, và back button đưa người dùng về đâu.
Việc học mobile trở nên hữu ích khi chủ đề gắn với một màn hình, một hành động của người dùng và một kết quả có thể kiểm tra. Giữ scope đủ nhỏ để hoàn thành, nhưng đủ thực tế để học hành vi sản phẩm chứ không chỉ học syntax.
Cách tiếp cận
Hãy bắt đầu từ user path trước khi chọn công cụ. Tự hỏi learner hoặc customer nhìn thấy gì đầu tiên, cần dữ liệu nào và flow có thể hỏng ở đâu. Cách này tránh lỗi phổ biến của người mới: tạo nhiều snippet rời rạc mà chưa hiểu app mobile vận hành như một flow thống nhất.
Tạo một flow nhỏ: onboarding, login, tabs, detail screen và settings. Viết từng transition. Sau đó hỏi: nếu user bấm back hoặc token hết hạn thì chuyện gì xảy ra?
Khối thực hành
| Cách yếu | Cách tốt hơn |
|---|---|
| Học mọi library cùng lúc | Xây một flow nhỏ rồi chọn tool khi thật sự cần |
| Chỉ kiểm tra happy path | Thêm loading, error hoặc empty state |
| Coi đọc bài là kết quả | Làm mini project và giải thích quyết định |
Danh sách kiểm tra
- chọn một screen hoặc flow nhỏ;
- kiểm tra thêm một failure case;
- liên hệ kết quả với portfolio project;
- nếu giải thích còn mơ hồ, hãy giảm scope;
Một checkpoint tốt là bạn có thể giải thích tradeoff bằng ngôn ngữ đơn giản hay không. Nếu câu trả lời chỉ dựa vào một snippet bạn chưa hiểu, hãy chậm lại và xây phiên bản nhỏ nhất. Khi bạn đổi một điều kiện mà vẫn dự đoán được kết quả, chủ đề đã trở nên thực tế.
Dùng trong NativePath thế nào
Hãy dùng /vi/courses cho lộ trình có cấu trúc. Khi cần luyện ngắn, dùng /vi/games; khi muốn kiểm tra tốc độ và độ chính xác, dùng /vi/arena. Hãy ghi lại điều gì bị lỗi, bạn đã test gì và phiên bản sau nên cải thiện gì. Thói quen này biến bài tập tutorial thành bằng chứng cho portfolio.
Trước khi chuyển tiếp
Hãy chuyển tiếp khi bạn có thể trình bày một ví dụ nhỏ chạy được, nêu một edge case và giải thích vì sao cách làm phù hợp với scope hiện tại. Bạn chưa cần một app hoàn hảo. Bạn cần bước tiếp theo rõ ràng và một kết quả vượt qua kiểm tra trên thiết bị thật.