Tiếp theo là Người 4 — Navigation, API & Data Handling. Phần này nên nói khoảng 5–6 phút và có vai trò nối từ “UI hoạt động thế nào” sang “ứng dụng thật xử lý nhiều màn hình và dữ liệu ra sao”. Slide Nội dung Thời gian 30 Why Navigation? 30s 31 React Navigation 40s 32 Stack Navigation 40s 33 Tab Navigation 35s 34 Passing Data Between Screens 40s 35 Fetching Data from API 50s 36 Async/Await & Error Handling 40s 37 Local Storage 40s 38 State Management + chuyển người 45s Slide 30 — Why Navigation? Tiêu đề: Why Do We Need Navigation? Ví dụ app TaskFlow: Home ↓ Add Task ↓ Task Detail ↓ Profile Hoặc sơ đồ: Home / \ ↓ ↓ Add Task Detail ↓ Edit Người 4 nói Trong một ứng dụng mobile thực tế, chúng ta thường có nhiều màn hình khác nhau. Ví dụ trong TaskFlow, người dùng có thể ở Home Screen, chuyển sang Add Task để thêm công việc, hoặc mở Task Detail để xem chi tiết. Vì vậy chúng ta cần một cơ chế để quản lý việc di chuyển giữa các screen. Cơ chế đó được gọi là navigation. Câu quan trọng: Navigation quản lý cách người dùng di chuyển giữa các màn hình của ứng dụng. Slide 31 — React Navigation Tiêu đề: React Navigation Nội dung: React Navigation │ ├── Stack Navigation ├── Bottom Tabs └── Drawer Navigation Có thể thêm: Common Navigation Types Stack → Screen A → Screen B Tabs → Home | Tasks | Profile Drawer → Side Menu Người 4 nói Một trong những thư viện phổ biến để xử lý navigation trong React Native là React Navigation. Nó cung cấp nhiều kiểu điều hướng khác nhau. Stack Navigation phù hợp khi các screen được mở lần lượt giống như xếp chồng. Bottom Tab Navigation thường được dùng cho các màn hình chính như Home, Tasks hoặc Profile. Ngoài ra còn có Drawer Navigation để tạo menu bên cạnh. Không cần đi sâu setup package ở slide này. Slide 32 — Stack Navigation Tiêu đề: Stack Navigation Sơ đồ: HomeScreen ↓ AddTaskScreen ↓ TaskDetailScreen Hình dung như stack: ┌───────────────────┐ │ TaskDetailScreen │ ← Top ├───────────────────┤ │ AddTaskScreen │ ├───────────────────┤ │ HomeScreen │ └───────────────────┘ Code: <Stack.Navigator> <Stack.Screen name="Home" component={HomeScreen} /> <Stack.Screen name="AddTask" component={AddTaskScreen} /> </Stack.Navigator> Người 4 nói Stack Navigation hoạt động tương tự một stack. Khi chúng ta mở một screen mới, screen đó được đưa lên phía trên. Khi nhấn nút Back, screen ở trên cùng được loại bỏ và chúng ta quay về screen trước đó. Trong ví dụ này HomeScreen là màn hình đầu tiên và từ đó chúng ta có thể mở AddTaskScreen. Không cần giải thích từng generic TypeScript. Slide 33 — Bottom Tab Navigation Tiêu đề: Bottom Tab Navigation Có thể minh họa: ┌────────────────────────────┐ │ │ │ Screen Content │ │ │ ├────────────────────────────┤ │ Home Tasks Profile │ └────────────────────────────┘ Code ngắn: <Tab.Navigator> <Tab
Tiếp theo là Người 4 — Navigation, API & Data Handling. Phần này nên nói khoảng 5–6 phút và có vai trò nối từ “UI hoạt động thế nào” sang “ứng dụng thật xử lý nhiều màn hình và dữ liệu ra sao”. Slide Nội dung Thời gian 30 Why Navigation? 30s 31 React Navigation 40s 32 Stack Navigation 40s 33 Tab Navigation 35s 34 Passing Data Between Screens 40s 35 Fetching Data from API 50s 36 Async/Await & Error Handling 40s 37 Local Storage 40s 38 State Management + chuyển người 45s Slide 30 — Why Navigation? Tiêu đề: Why Do We Need Navigation? Ví dụ app TaskFlow: Home ↓ Add Task ↓ Task Detail ↓ Profile Hoặc sơ đồ: Home / \ ↓ ↓ Add Task Detail ↓ Edit Người 4 nói Trong một ứng dụng mobile thực tế, chúng ta thường có nhiều màn hình khác nhau. Ví dụ trong TaskFlow, người dùng có thể ở Home Screen, chuyển sang Add Task để thêm công việc, hoặc mở Task Detail để xem chi tiết. Vì vậy chúng ta cần một cơ chế để quản lý việc di chuyển giữa các screen. Cơ chế đó được gọi là navigation. Câu quan trọng: Navigation quản lý cách người dùng di chuyển giữa các màn hình của ứng dụng. Slide 31 — React Navigation Tiêu đề: React Navigation Nội dung: React Navigation │ ├── Stack Navigation ├── Bottom Tabs └── Drawer Navigation Có thể thêm: Common Navigation Types Stack → Screen A → Screen B Tabs → Home | Tasks | Profile Drawer → Side Menu Người 4 nói Một trong những thư viện phổ biến để xử lý navigation trong React Native là React Navigation. Nó cung cấp nhiều kiểu điều hướng khác nhau. Stack Navigation phù hợp khi các screen được mở lần lượt giống như xếp chồng. Bottom Tab Navigation thường được dùng cho các màn hình chính như Home, Tasks hoặc Profile. Ngoài ra còn có Drawer Navigation để tạo menu bên cạnh. Không cần đi sâu setup package ở slide này. Slide 32 — Stack Navigation Tiêu đề: Stack Navigation Sơ đồ: HomeScreen ↓ AddTaskScreen ↓ TaskDetailScreen Hình dung như stack: ┌───────────────────┐ │ TaskDetailScreen │ ← Top ├───────────────────┤ │ AddTaskScreen │ ├───────────────────┤ │ HomeScreen │ └───────────────────┘ Code: <Stack.Navigator> <Stack.Screen name="Home" component={HomeScreen} /> <Stack.Screen name="AddTask" component={AddTaskScreen} /> </Stack.Navigator> Người 4 nói Stack Navigation hoạt động tương tự một stack. Khi chúng ta mở một screen mới, screen đó được đưa lên phía trên. Khi nhấn nút Back, screen ở trên cùng được loại bỏ và chúng ta quay về screen trước đó. Trong ví dụ này HomeScreen là màn hình đầu tiên và từ đó chúng ta có thể mở AddTaskScreen. Không cần giải thích từng generic TypeScript. Slide 33 — Bottom Tab Navigation Tiêu đề: Bottom Tab Navigation Có thể minh họa: ┌────────────────────────────┐ │ │ │ Screen Content │ │ │ ├────────────────────────────┤ │ Home Tasks Profile │ └────────────────────────────┘ Code ngắn: <Tab.Navigator> <Tab
Created using ChatSlide
Hướng dẫn này cung cấp cái nhìn tổng quan về việc xây dựng ứng dụng đa màn hình với React Navigation, bao gồm các loại điều hướng như Stack, Tab và Drawer. Nó cũng hướng dẫn cách kết nối màn hình với dữ liệu, sử dụng Tab cho các chức năng như Home, Tasks và Profile, cũng như cách truyền tham số giữa các màn hình. Cuối cùng, nó đề cập đến việc lưu trữ và quản lý trạng thái với AsyncStorage và các phương pháp quản lý trạng thái hiệu quả.