Làm app di động với React Native và Expo, từ cài đặt đến kiểm thử E2E

Chỉ với một trang, bạn đi từ cài Android Studio và adb, qua dự án mẫu FocusList dùng Expo Router, đến test tự động bằng Maestro trên emulator. Đây là bản tóm tắt dành cho người mới bắt đầu làm app di động — biết React cho web là bạn đã có khoảng 70% kiến thức; phần còn lại là đổi bộ “gạch xây nhà”.

Key points

• Không có div hay p. Bạn dùng View, Text, Image, TextInput, Pressable, FlatList — mỗi cái được vẽ bằng view native thật (Android: ViewGroup, TextView…).
• Style là object JS (backgroundColor, không phải background-color), mọi thứ dàn bằng Flexbox và hướng mặc định là column (web thì mặc định là row).
• Expo là bộ công cụ bao quanh React Native: tạo dự án, chạy thử, build, cập nhật — giúp bạn khỏi tự cấu hình phần native.
• Expo Router: file thành màn hình. app/add.tsx → route /add, app/task/[id].tsx → /task/42 (đọc bằng useLocalSearchParams()).
• React Native dùng dp (density-independent pixel): px thật = dp × density. 48 dp là cỡ vùng chạm tối thiểu thường được khuyến nghị trên Android (iOS nhắc 44 pt).
• Ba cách chạy app: Expo Go (học, không cần Android Studio), development build (cần thư viện native), bản phát hành qua EAS.
• E2E mở app thật rồi bấm như người dùng. Ba lựa chọn: Maestro (YAML, nhẹ), Detox (JS/TS, gray-box), Appium (WebDriver, đa ngôn ngữ).
• Kiến trúc mới thay “bridge” bằng JSI để JS gọi thẳng vào C++, cùng Fabric (vẽ UI) và TurboModules; là mặc định cho dự án mới từ RN 0.76.

Tips & tricks

Mẹo nhớ hay nhất: “Web is row, RN is column”. Flexbox của React Native mặc định xếp theo cột, ngược với web — quên điều này là nguồn gốc của hầu hết bố cục “sai sai” của người mới.

• React Native = phiên dịch viên: bạn nói React, nó dịch sang tiếng Android và iOS.
• Expo = chung cư có sẵn tiện ích: điện nước đã có, bạn chỉ lo nội thất; cần thêm thì “cơi nới” bằng dev build.
• Danh sách dài: dùng FlatList (chỉ vẽ phần đang hiện, luôn đặt keyExtractor), tránh ScrollView cho nội dung dài.
• Trên Windows, đừng dùng setx để sửa PATH — nó có thể cắt ngắn PATH dài; sửa qua giao diện Environment Variables rồi mở lại terminal.
• Giảm flaky test: gắn testID ổn định, reset trạng thái mỗi lần chạy (clearState), chờ theo điều kiện (assertVisible) thay vì sleep, dùng cùng cấu hình emulator giữa máy bạn và CI.
• Bảo mật: biến EXPO_PUBLIC_* bị nhúng vào bundle nên ai cũng đọc được — đừng đặt bí mật ở đó; token nhạy cảm nên dùng expo-secure-store.

Quick reference

Lệnh adb cần nhớ

• adb devices — liệt kê thiết bị/emulator đang kết nối.
• adb reverse tcp:8081 tcp:8081 — cho thiết bị nối tới Metro qua USB (8081 là cổng mặc định của Metro).
• adb shell pm clear <package> — xoá dữ liệu app, hữu ích để reset trước khi test.
• adb logcat *:E — xem log lỗi của thiết bị.

Vài con số và cú pháp đáng nhớ

• Bật chế độ nhà phát triển: chạm Số bản dựng (Build number) 7 lần, rồi bật Gỡ lỗi USB.
• px = dp × density; mật độ xxhdpi = ×3. PixelRatio.get() trả về tỉ lệ này.
• Ngân sách mỗi khung hình: 60 fps ≈ 16,7 ms, 120 fps ≈ 8,3 ms (ms = 1000 ÷ fps).
• Metro (đóng gói JS) và Hermes (engine JS tối ưu, mặc định từ RN 0.70).
• Tạo dự án: npx create-expo-app@latest; cài thư viện khớp SDK: npx expo install.
• EAS: eas build -p android --profile preview (APK) / production (AAB); eas update chỉ đẩy JS, không đổi được code native.

Go deeper

Phiên bản tương tác để bạn vừa đọc vừa bấm thử: sơ đồ 5 bước “một cú chạm đi đâu” (có nút Bước tiếp/Tự chạy), sân chơi Flexbox sinh code theo thời gian thực, máy tính dp ↔ px kèm biểu đồ 48 dp theo mật độ, công cụ chọn mục tiêu cài đặt, checklist tiến độ, hướng dẫn Maestro từng bước và trình dựng flow YAML, biểu đồ ngân sách khung hình, bảng từ vựng Anh–Việt, cùng mini game 20 câu có chấm điểm và thưởng chuỗi (tối đa 136 điểm).

Mở phiên bản đầy đủ →