Buổi 03 — Lý thuyết: Bản đồ app với Expo Router

Mục tiêu buổi học

Phân biệt tab navigation và stack navigation
Hiểu quy tắc “mỗi file là một màn hình” của Expo Router
Đọc được cấu trúc thư mục app/ của TaskFlow
Biết cách mở màn hình chi tiết và nhận tham số id
Biết cách hiển thị danh sách dài hiệu quả và chọn thông tin cho dashboard

Tab navigation giúp chuyển giữa các khu vực ngang cấp. Stack navigation mở một màn hình chi tiết rồi quay lại đúng vị trí trước đó.

Tab Công việc ── bấm TaskCard ──> Chi tiết công việc
      ↑                                 │
      └─────────── quay lại ────────────┘

2. Expo Router — mỗi file là một màn hình

Project TaskFlow tạo ở buổi 1 đã dùng Expo Router. Bạn không khai báo danh sách màn hình trong code. Thay vào đó, đường dẫn file trong thư mục app/ chính là đường dẫn màn hình.

Project tạo bằng template mặc định của Expo SDK 57 đặt thư mục này ở src/app/. Một số project khác đặt ở app/ ngay thư mục gốc. Cả hai đều hoạt động giống nhau, bên dưới dùng src/app/.

Cấu trúc điều hướng của TaskFlow:

src/app/
├── _layout.tsx            → Stack gốc: bọc toàn bộ app
├── (tabs)/
│   ├── _layout.tsx        → Thanh tab dưới cùng
│   ├── index.tsx          → Tab Tổng quan       (/)
│   ├── tasks.tsx          → Tab Công việc       (/tasks)
│   ├── notifications.tsx  → Tab Thông báo       (/notifications)
│   └── account.tsx        → Tab Tài khoản       (/account)
└── task/
    └── [id].tsx           → Chi tiết công việc  (/task/123)

Bốn quy tắc cần nhớ:

Quy tắc	Ý nghĩa	Trong TaskFlow
`_layout.tsx`	Khung bọc các màn hình cùng thư mục: Stack, Tabs…	`(tabs)/_layout.tsx` tạo thanh tab
`index.tsx`	Màn hình mặc định của thư mục	Tab Tổng quan mở đầu tiên
`(tên)`	Nhóm: gom file lại nhưng không thêm vào đường dẫn	`(tabs)/tasks.tsx` có đường dẫn `/tasks`, không phải `/(tabs)/tasks`
`[tên]`	Route động: một file dùng cho nhiều đối tượng	`task/[id].tsx` dùng cho mọi công việc

3. Tabs bên trong Stack

Stack gốc chứa nhóm (tabs) và màn hình chi tiết. Nhờ vậy, khi mở chi tiết, màn hình mới đè lên cả thanh tab và có nút quay lại.

src/app/_layout.tsx

import { Stack } from 'expo-router';

export default function RootLayout() {
  return (
    <Stack>
      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
      <Stack.Screen name="task/[id]" options={{ title: 'Chi tiết công việc' }} />
    </Stack>
  );
}

Layout của nhóm tab khai báo tên, icon cho từng tab. Thuộc tính name phải khớp tên file:

src/app/(tabs)/_layout.tsx

import { Tabs } from 'expo-router';
import { MaterialCommunityIcons } from '@expo/vector-icons';

export default function TabLayout() {
  return (
    <Tabs screenOptions={{ tabBarActiveTintColor: '#2563eb' }}>
      <Tabs.Screen
        name="index"
        options={{
          title: 'Tổng quan',
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="view-dashboard" color={color} size={size} />
          ),
        }}
      />
      <Tabs.Screen
        name="tasks"
        options={{
          title: 'Công việc',
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="format-list-checks" color={color} size={size} />
          ),
        }}
      />
      <Tabs.Screen
        name="notifications"
        options={{
          title: 'Thông báo',
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="bell-outline" color={color} size={size} />
          ),
        }}
      />
      <Tabs.Screen
        name="account"
        options={{
          title: 'Tài khoản',
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="account-circle-outline" color={color} size={size} />
          ),
        }}
      />
    </Tabs>
  );
}

Template SDK 57 dùng NativeTabs (import từ expo-router/unstable-native-tabs) — thanh tab dùng component gốc của hệ điều hành. Khóa học dùng Tabs vì API ổn định và dùng được bộ icon @expo/vector-icons sẵn có. Khi AI sửa layout tab, hãy kiểm tra nó dùng loại nào.

4. Chuyển màn hình và nhận tham số

Có hai cách mở màn hình chi tiết:

import { Link, useRouter } from 'expo-router';

// Cách 1 — Link: bọc quanh phần tử bấm được
<Link href={`/task/${task.id}`} asChild>
  <Pressable>...</Pressable>
</Link>

// Cách 2 — router.push: gọi trong hàm xử lý sự kiện
const router = useRouter();
router.push(`/task/${task.id}`);

Màn hình chi tiết đọc id từ đường dẫn bằng useLocalSearchParams:

src/app/task/[id].tsx

import { Stack, useLocalSearchParams } from 'expo-router';
import { Text, View } from 'react-native';

export default function TaskDetailScreen() {
  const { id } = useLocalSearchParams<{ id: string }>();

  return (
    <View style={{ flex: 1, padding: 16 }}>
      <Stack.Screen options={{ title: `Công việc #${id}` }} />
      <Text>Đang xem công việc có mã: {id}</Text>
    </View>
  );
}

Cần làm	Dùng
Mở màn hình mới, có thể quay lại	`router.push()` hoặc `<Link>`
Quay lại màn hình trước	`router.back()` hoặc nút quay lại trên header
Thay màn hình hiện tại, không quay lại được	`router.replace()` — ví dụ sau khi xong màn hình giới thiệu

Chỉ truyền id qua đường dẫn, không truyền cả object công việc. Màn hình chi tiết dùng id để tìm công việc trong dữ liệu. Nếu AI sinh code kiểu params: { task: JSON.stringify(task) }, hãy yêu cầu sửa lại.

5. Bốn tab của TaskFlow

Tab	File	Nội dung
Tổng quan	`(tabs)/index.tsx`	Chỉ số và công việc cần chú ý
Công việc	`(tabs)/tasks.tsx`	Danh sách, tìm kiếm và bộ lọc
Thông báo	`(tabs)/notifications.tsx`	Giao việc, bình luận và nhắc hạn
Tài khoản	`(tabs)/account.tsx`	Hồ sơ, nhóm và cài đặt

6. Dashboard trả lời điều gì?

Trong vài giây, người dùng cần biết:

Hôm nay cần làm gì?
Việc nào quá hạn hoặc ưu tiên cao?
Tiến độ chung đang ở mức nào?
Ai đang phụ trách từng việc?

7. Danh sách cuộn thông minh

FlatList chỉ dựng các phần tử cần thiết trên màn hình. Bạn cung cấp nguồn dữ liệu và khuôn TaskCard; React Native xử lý phần lặp. Mỗi TaskCard khi bấm sẽ mở /task/[id] tương ứng.

Tóm tắt buổi học

Expo Router: đường dẫn file trong app/ là đường dẫn màn hình.
_layout.tsx quyết định kiểu điều hướng: Stack cho luồng đi sâu, Tabs cho khu vực chính.
Nhóm (tabs) gom file mà không đổi đường dẫn; [id] tạo route động.
Mở màn hình bằng Link hoặc router.push, đọc tham số bằng useLocalSearchParams.
Dashboard ưu tiên hành động; danh sách dùng FlatList và component tái sử dụng.

Tổng quan

Nhập môn — Cài đặt công cụ

Buổi 01 — Nhập môn Vibe Coding & Setup Expo

Buổi 02 — Components/State & React Native Paper

Buổi 03 — Navigation & Bảng công việc

Buổi 04 — UI/UX Components & Expo Modules

Buổi 05 — Firebase, Bình luận & Tệp đính kèm

Buổi 06 — Zustand, Đăng nhập & Cộng tác

Buổi 07 — Thông báo đẩy & API thiết bị

Buổi 08 — Đóng gói, Phát hành & Bảo trì

Lý thuyết

Buổi 03 — Lý thuyết: Bản đồ app với Expo Router

Mục tiêu buổi học

1. Navigation — bản đồ của app

2. Expo Router — mỗi file là một màn hình

3. Tabs bên trong Stack

4. Chuyển màn hình và nhận tham số

5. Bốn tab của TaskFlow

6. Dashboard trả lời điều gì?

7. Danh sách cuộn thông minh

Tóm tắt buổi học

​Buổi 03 — Lý thuyết: Bản đồ app với Expo Router

​Mục tiêu buổi học

​1. Navigation — bản đồ của app

​2. Expo Router — mỗi file là một màn hình

​3. Tabs bên trong Stack

​4. Chuyển màn hình và nhận tham số

​5. Bốn tab của TaskFlow

​6. Dashboard trả lời điều gì?

​7. Danh sách cuộn thông minh

​Tóm tắt buổi học

Buổi 03 — Lý thuyết: Bản đồ app với Expo Router

Mục tiêu buổi học

1. Navigation — bản đồ của app

2. Expo Router — mỗi file là một màn hình

3. Tabs bên trong Stack

4. Chuyển màn hình và nhận tham số

5. Bốn tab của TaskFlow

6. Dashboard trả lời điều gì?

7. Danh sách cuộn thông minh

Tóm tắt buổi học