Core component
Core components
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.
Làm app di động với React Native và Expo, từ cài đặt đến kiểm thử E2E
From a clean Android setup to a tested React Native app built with Expo
Một trang, đi từ cài Android Studio và adb, qua dự án FocusList, đến test tự động bằng Maestro trên emulator.
React Native / JS
Expo / EAS
Android / native
Kiểm thử / Testing
Cảnh báo / Gotcha
Cơ bản Basics ●○○ Beginner · Cơ bản
Nếu bạn đã biết React cho web, bạn đã có 70% kiến thức. Phần còn lại là đổi bộ “gạch xây nhà”.
StyleSheet và Flexbox
Styling & layout
Style viết bằng object JS (backgroundColor, không phải background-color). Mọi thứ dàn bằng Flexbox, và hướng mặc định là dọc (column).
State và hook
State & hooks
Giống hệt React web: useState, useEffect. Đổi state thì giao diện tự cập nhật.
Expo
Framework and toolchain
Expo là bộ công cụ và thư viện bao quanh React Native: tạo dự án, chạy thử, build, cập nhật. Nó giúp bạn khỏi phải tự cấu hình phần native.
Expo Router
File-based navigation
Giống App Router của Next.js: file trong thư mục app/ thành màn hình. app/add.tsx thành route /add.
Chạy trên máy thật
Real devices & emulators
Code của bạn chạy bằng engine JS (Hermes) trong app native. Bạn xem kết quả trên điện thoại thật hoặc emulator Android.
Mẹo nhớ Memory tips
- React Native = phiên dịch viên. Bạn nói React, nó dịch sang tiếng Android và iOS. You speak React, it speaks native.
- Expo = chung cư có sẵn tiện ích. Điện nước đã có, bạn chỉ lo nội thất. Khi cần xây thêm, bạn vẫn có thể “cơi nới” bằng dev build.
- Flexbox RN: “mặc định xếp cột”. Web thì mặc định xếp hàng. Web is row, RN is column.
Web so với React Native Web vs React Native
| Web | React Native | Trên Android thành / Becomes on Android |
|---|---|---|
div | View | ViewGroup |
p, span, h1 | Text (chữ luôn phải nằm trong Text) | TextView |
img | Image | ImageView |
input | TextInput | EditText |
button, onclick | Pressable, onPress | View có nhận chạm |
ul + li | FlatList | Danh sách tái sử dụng view |
CSS px | Số không đơn vị = dp | density-independent pixel |
Hiểu lầm thường gặp Common misconceptions
- “React Native là web được đóng gói trong WebView.” Sai: UI được vẽ bằng view native.
- “Dùng Expo thì bị giới hạn.” Chưa đúng: Expo Go có giới hạn, nhưng dev build cho phép thêm code native.
- “Expo Go chính là app của tôi.” Sai: Expo Go là một app có sẵn để chạy thử, không phải bản phát hành.
- “Phải cài Android Studio mới thử được.” Không: chạy bằng Expo Go trên điện thoại thật thì không cần (xem phần Cài đặt).
Cài đặt môi trường Environment setup ●○○ Beginner · Cơ bản
Bước này hay làm người mới nản nhất. Hãy chọn đúng mục tiêu để chỉ cài thứ bạn cần.
Bạn muốn làm gì? Pick your goal
Cài Android Studio và SDK Android Studio & SDK
- Cài Node.js bản LTS (kiểm tra bằng
node -v). - Cài Android Studio. Lần chạy đầu, chọn bản cài Standard để nó tải SDK cơ bản.
- Mở More Actions → SDK Manager (hoặc Settings → Languages & Frameworks → Android SDK) rồi đánh dấu các mục trong bảng dưới.
- Mở Device Manager, tạo một thiết bị ảo (AVD) và chạy thử.
- Đặt biến môi trường
ANDROID_HOMEvà thêm thư mục công cụ vàoPATH(dùng công cụ bên dưới).
| Mục trong SDK Manager | Dùng để làm gì What for | Bắt buộc? |
|---|---|---|
| Android SDK Platform (một API level gần đây) | Thư viện để biên dịch app cho phiên bản Android đó | Có |
| Android SDK Platform-Tools | Chứa adb để nói chuyện với thiết bị | Có |
| Android SDK Build-Tools | Công cụ đóng gói APK/AAB, Gradle gọi tới | Có (khi build local) |
| Android Emulator | Chạy máy ảo | Nếu dùng emulator |
| System Image (đúng kiến trúc máy bạn) | “Hệ điều hành” cho máy ảo: x86_64 cho Intel/AMD, arm64 cho chip Apple Silicon | Nếu dùng emulator |
| Command-line Tools | Công cụ dòng lệnh như sdkmanager | Nên có |
Dự án React Native yêu cầu một bản JDK cụ thể (tài liệu hiện nay khuyên JDK 17, hãy kiểm tra lại cho phiên bản bạn dùng). JDK đi kèm Android Studio thường dùng được.
Sinh lệnh biến môi trường Environment variable helper
Đừng dùng
setx để sửa PATH trên Windows. Lệnh này có thể cắt ngắn PATH dài. Hãy sửa trong Environment Variables bằng giao diện rồi mở lại terminal.Checklist tiến độ Setup checklist
Bật chế độ nhà phát triển trên điện thoại thật Real device
- Cài đặt → Thông tin điện thoại, chạm Số bản dựng (Build number) 7 lần.
- Vào Tuỳ chọn nhà phát triển, bật Gỡ lỗi USB (USB debugging).
- Cắm cáp, chấp nhận hộp thoại tin cậy máy tính, rồi chạy
adb devices. Máy phải hiện trạng tháidevice.
Tên menu thay đổi theo hãng máy (Samsung, Xiaomi, Oppo...).
Bộ lệnh adb cần nhớ adb cheat sheet
| Lệnh | Công dụng |
|---|---|
adb devices | Liệt kê thiết bị và emulator đang kết nối |
adb reverse tcp:8081 tcp:8081 | Cho thiết bị nối tới Metro trên máy bạn qua cáp USB |
adb logcat *:E | Xem log lỗi của thiết bị |
adb install -r app.apk | Cài (hoặc cài đè) file APK |
adb shell pm clear com.example.focuslist | Xoá dữ liệu app, hữu ích để reset trước khi test |
adb shell input keyevent 82 | Mở menu nhà phát triển của app |
adb exec-out screencap -p > shot.png | Chụp màn hình thiết bị |
adb kill-server rồi adb start-server | Khởi động lại dịch vụ adb khi nó “đơ” |
Gỡ lỗi cài đặt Troubleshooting
| Triệu chứng | Nguyên nhân thường gặp | Cách xử lý |
|---|---|---|
adb is not recognized | Chưa thêm platform-tools vào PATH | Thêm đường dẫn, mở lại terminal |
| SDK location not found | Thiếu ANDROID_HOME | Đặt biến, hoặc ghi sdk.dir=... vào android/local.properties |
Thiết bị hiện unauthorized | Chưa chấp nhận khoá RSA | Mở khoá máy, chấp nhận hộp thoại; nếu không có, thu hồi quyền gỡ lỗi USB rồi cắm lại |
| Emulator rất chậm hoặc không lên | Chưa bật ảo hoá, hoặc system image sai kiến trúc | Bật virtualization trong BIOS/OS, chọn image khớp CPU |
| App trắng/đỏ, không tìm thấy Metro | Thiết bị không thấy máy tính | adb reverse tcp:8081 tcp:8081, hoặc cùng Wi-Fi, hoặc npx expo start --tunnel |
| Gradle báo sai phiên bản Java | JAVA_HOME trỏ JDK khác | Trỏ tới JDK được yêu cầu (thường là JDK đi kèm Android Studio) |
| Port 8081 đã bị dùng | Có Metro khác đang chạy | Tắt tiến trình cũ hoặc chọn cổng khác khi chạy |
Công cụ chẩn đoán nhanh: npx expo-doctor kiểm tra cấu hình dự án Expo.
Tương tác Hands-on ●○○ Beginner · Cơ bản
Một cú chạm đi đâu? What happens on a tap
Bấm Bước tiếp hoặc Tự chạy để đi qua từng giai đoạn. Mặc định đang tạm dừng.
Sơ đồ khái niệm của kiến trúc mới, không theo tỉ lệ thời gian. Conceptual diagram, not to scale.
Sân chơi Flexbox Flexbox playground
Thử thay đổi và so với mặc định của React Native.
1
2
3
Dự án mẫu: FocusList Sample project ●○○ Beginner · Cơ bản
Ứng dụng danh sách việc cần làm: xem danh sách, thêm việc mới, lưu lại trên máy. Dùng TypeScript và Expo Router.
Trung cấp Intermediate ●●○ Intermediate · Trung cấp
Expo Go, dev build và bản phát hành Three ways to run
| Tiêu chí | Expo Go | Development build | Bản phát hành (EAS) |
|---|---|---|---|
| Là gì | App có sẵn trên cửa hàng, nạp dự án của bạn | App riêng của bạn, kèm công cụ dev | Bản gửi lên cửa hàng |
| Thư viện native tuỳ chỉnh | Không | Có | Có |
| Cần Android Studio? | Không | Build trên máy: có. Build trên EAS: không | Không nếu build trên EAS |
| Dùng khi | Học, thử nhanh | Phát triển hằng ngày khi cần native | Phát hành, test E2E sát thực tế |
Expo Router: file thành màn hình File → route
| File | Route | Ghi chú |
|---|---|---|
app/index.tsx | / | Màn hình đầu |
app/add.tsx | /add | Một màn hình khác |
app/task/[id].tsx | /task/42 | Đoạn động, đọc bằng useLocalSearchParams() |
app/_layout.tsx | (khung bọc) | Đặt Stack hoặc Tabs ở đây |
app/(tabs)/... | (nhóm route) | Ngoặc tròn nhóm file mà không đổi URL |
Máy tính dp và pixel dp ↔ px calculator
React Native dùng dp (density-independent pixel): cùng một số, kích thước nhìn gần như nhau trên mọi màn hình. Số pixel thật bằng dp nhân tỉ lệ mật độ.
Công thức: px = dp × density. Kích thước vật lý tính theo định nghĩa lý thuyết 1 dp = 1/160 inch. Thiết bị thật sai lệch nhất định. Trong code, PixelRatio.get() trả về tỉ lệ này.
Các ô đúng tỉ lệ với nhau về số pixel. Chúng không phải kích thước thật trên màn hình của bạn. 48 dp là cỡ tối thiểu thường được khuyến nghị cho vùng chạm trên Android (iOS thường nhắc 44 pt).
Danh sách hiệu quả Lists
ScrollViewvẽ tất cả phần tử một lúc, chỉ dùng cho nội dung ngắn.FlatListchỉ vẽ phần đang hiện và tái sử dụng view: luôn đặtkeyExtractor.- Tách
renderItemthành component riêng và bọcReact.memokhi danh sách dài.
Kiểm thử đơn vị với Jest Unit tests
Kiểm thử component nhanh, không cần emulator.
Kiểm thử E2E trên di động Mobile E2E testing ●●○ Intermediate · Trung cấp
E2E (end-to-end) mở app thật trên emulator hoặc máy thật, rồi bấm như người dùng: đăng nhập, thêm việc, kiểm tra kết quả.
Kim tự tháp kiểm thử Testing pyramid
Minh hoạ, không theo tỉ lệ. Illustrative, not to scale. Quy tắc: viết ít E2E, chỉ cho các hành trình quan trọng (đăng nhập, thanh toán, thao tác chính).
Cách một bài E2E hoạt động How E2E works
Sơ đồ khái niệm, không theo tỉ lệ. Chi tiết bên trong từng công cụ khác nhau.
Chọn công cụ nào? Choosing a tool
| Tiêu chí | Maestro | Detox | Appium |
|---|---|---|---|
| Cách viết test | File YAML | JavaScript/TypeScript với Jest | WebDriver, nhiều ngôn ngữ |
| Kiểu | Black-box | Gray-box, đồng bộ với app | Black-box |
| Cài đặt | Nhẹ, một CLI | Nặng hơn, phải cấu hình build native | Cần server và driver |
| Độ ổn định | Tự chờ giao diện ổn định | Tự đồng bộ với animation và mạng | Bạn thường tự viết đoạn chờ |
| Hợp với | Bắt đầu nhanh, QA ít code | Đội JS cần kiểm soát sâu | Đội đa ngôn ngữ, farm thiết bị |
Đánh giá chung, có thể thay đổi theo từng phiên bản. Hãy đọc tài liệu mới nhất trước khi chọn.
Hướng dẫn từng bước với Maestro Step by step with Maestro
Trình dựng flow Maestro Flow builder
Chọn lệnh, nhập giá trị, bấm thêm. Mẫu YAML hiện ngay bên dưới.
Detox, tóm tắt Detox in short
Detox cần cấu hình build native (.detoxrc.js). Với Expo, bạn cần dev build và config plugin; hãy làm theo tài liệu hiện hành của Detox và Expo.
Chạy trên CI CI example
Gotcha: bản debug tải JS từ Metro, nên trên CI hãy dùng bản release hoặc profile
preview của EAS (đã đóng gói sẵn JS). Phiên bản action và cú pháp ở trên chỉ để minh hoạ, hãy kiểm tra lại.Mẹo để test bớt “flaky” Reducing flakiness
- Gắn
testIDcho phần tử quan trọng; trên Android nó trở thànhresource-id, trên iOS là accessibility identifier. - Reset trạng thái mỗi lần chạy:
clearStatecủa Maestro hoặcadb shell pm clear. - Dùng dữ liệu giả cố định (mock server hoặc tài khoản test) thay vì dữ liệu thật.
- Chờ theo điều kiện (
assertVisible), tránhsleepcố định. - Dùng emulator cùng cấu hình (API level, kích thước) giữa máy bạn và CI.
- Chụp ảnh màn hình khi lỗi để dễ tìm nguyên nhân.
Nâng cao Advanced ●●● Advanced · Nâng cao
Kiến trúc mới New Architecture
Kiến trúc cũ gửi thông điệp JSON bất đồng bộ qua “bridge”. Kiến trúc mới dùng JSI để JS gọi thẳng vào C++, cùng Fabric (vẽ giao diện) và TurboModules (module native nạp khi cần). Từ các bản gần đây nó là mặc định cho dự án mới, nhưng thời điểm và mức hỗ trợ kiến trúc cũ thay đổi giữa các bản, hãy xem ghi chú phát hành của phiên bản bạn dùng.
Ngân sách thời gian mỗi khung hình Frame budget
Thang đo đúng tỉ lệ: ms = 1000 ÷ fps, làm tròn. Muốn mượt, công việc cho mỗi khung hình phải xong trong ngần ấy thời gian.
Prebuild và config plugin CNG
Với Continuous Native Generation (CNG), thư mục android/ và ios/ được sinh ra từ app.json cộng các config plugin, nên bạn không phải commit code native.
Phát hành bằng EAS Shipping with EAS
- Cửa hàng Google Play dùng định dạng AAB; APK tiện để cài thử và chạy E2E.
- EAS Update đẩy bản cập nhật JS và tài nguyên qua mạng. Nó không thay đổi được code native.
- Giữ an toàn khoá ký (keystore). EAS có thể quản lý giúp, và Play App Signing giảm rủi ro mất khoá.
- Google Play yêu cầu target API level đủ mới và mức này tăng theo năm, hãy kiểm tra yêu cầu hiện hành trước khi phát hành.
Hiệu năng Performance
- Đo trước khi tối ưu (React DevTools, profiler của Hermes).
- Giảm render thừa bằng
React.memo,useCallback,useMemoở nơi thật sự cần. - Animation mượt: dùng Reanimated để chạy trên UI thread thay vì thread JS.
- Danh sách rất dài: cân nhắc FlashList thay cho FlatList.
- Bỏ
console.logồ ạt trong bản production.
Bảo mật Security
- Biến môi trường tiền tố
EXPO_PUBLIC_được nhúng vào bundle JS và ai cũng đọc được, nên đừng đặt bí mật ở đó. - Lưu token trong
expo-secure-store, không dùng AsyncStorage cho dữ liệu nhạy cảm. - Mọi kiểm tra quyền thật sự phải nằm ở server.
Dòng thời gian Timeline
- 2015 Facebook giới thiệu React Native, mở mã nguồn trong năm (iOS trước, Android sau).
- Giữa thập niên 2010 Expo xuất hiện để đơn giản hoá việc làm app React Native.
- 2019 Hermes, engine JS cho React Native, được công bố.
- 2022 Hermes trở thành engine mặc định (từ RN 0.70).
- 2022 → 2023 Expo Router đưa routing theo file vào Expo.
- 2024 Kiến trúc mới trở thành mặc định từ RN 0.76.
Mốc năm làm tròn và có thể lệch một chút tuỳ nguồn. Số phiên bản mới nhất của RN và Expo SDK thay đổi nhiều lần mỗi năm, hãy xem trang chính thức.
Thực hành tốt nhất Best practices
- Bắt đầu bằng
npx create-expo-app@latestvà bật TypeScript strict. - Cài thư viện bằng
npx expo installđể được bản tương thích với SDK. - Dùng dev build ngay khi dự án cần thư viện native.
- Thiết kế vùng chạm tối thiểu 48 dp và thêm
accessibilityLabel. - Tách logic khỏi giao diện (như
TaskFormnhậnonSubmit) để dễ test. - Gắn
testIDổn định ngay từ đầu cho các phần tử chính. - Chạy
npx expo-doctorvà lint trong CI. - Thử trên máy Android thật cấu hình thấp trước khi phát hành.
Câu hỏi còn mở Open questions
- Khi nào kiến trúc cũ bị loại bỏ hoàn toàn, và thư viện cũ sẽ xử lý ra sao?
- Một codebase cho di động, web và máy tính để bàn có thực sự đáng giá về lâu dài?
- Cân bằng giữa số lượng E2E và chi phí bảo trì: bao nhiêu là đủ?
- Chính sách của cửa hàng ứng dụng đối với cập nhật OTA có thể thay đổi thế nào?
Từ vựng Vocabulary ●●○ Mọi cấp / All levels
| English | Tiếng Việt | Example sentence |
|---|
Mini game Review quiz ●●○ 20 câu / questions
5 điểm mỗi câu đúng, từ câu đúng thứ 3 liên tiếp được thêm 2 điểm thưởng chuỗi. Điểm tối đa là 136.