Bản địa hóa React Native tiếng Việt: Expo, i18n, VND và ngày tháng

💡 React Native hỗ trợ tiếng Việt chỉ trong vài giờ: cài expo-localization, đọc getLocales()[0].languageCode để nhận vi trên thiết bị tiếng Việt, kết nối i18n-js hoặc react-i18next cho bản dịch, định dạng VND bằng Intl.NumberFormat('vi-VN', { style: 'currency', currency: 'VND', maximumFractionDigits: 0 }) và hiển thị ngày theo thứ tự dd/MM/yyyy. Danh từ tiếng Việt không biến hóa theo số lượng, nên một khóa dịch duy nhất phục vụ được mọi trường hợp.

Làm thế nào để phát hiện và cài đặt tiếng Việt trong ứng dụng React Native?

Gói expo-localization là cách được khuyến nghị để đọc locale thiết bị. Cài đặt bằng npx expo install expo-localization, sau đó gọi getLocales() khi khởi động:

import { getLocales } from 'expo-localization';

const deviceLang = getLocales()[0]?.languageCode ?? 'en'; // 'vi' trên thiết bị tiếng Việt
const deviceTag  = getLocales()[0]?.languageTag  ?? 'en-US'; // 'vi-VN'

getLocales() trả về danh sách ưu tiên ngôn ngữ của người dùng. Phần tử đầu tiên là locale chính. Với tiếng Việt, languageCode là vi và languageTag là vi-VN. Truyền deviceLang vào thư viện dịch làm ngôn ngữ khởi đầu, lưu trong React state hoặc context để UI cập nhật khi người dùng đổi ngôn ngữ thiết bị.

Với dự án bare React Native không dùng Expo, gói cộng đồng react-native-localize cung cấp API getLocales() tương tự.

Thư viện dịch nào phù hợp nhất cho tiếng Việt?

Tài liệu Expo liệt kê bốn lựa chọn: i18n-js, react-i18next, Lingui và Intlayer. Tiếng Việt hoạt động tốt với tất cả. Sự khác biệt thực tế là:

• i18n-js: nhẹ (~10 kB), file dịch JSON đơn giản, dễ bảo trì cho người không phải lập trình viên. Phù hợp với ứng dụng vừa và nhỏ khi người dịch chỉnh sửa JSON trực tiếp.
• react-i18next: giải pháp phổ biến nhất. Hỗ trợ ICU MessageFormat, namespace, lazy loading và plugin backend để tải bản dịch qua mạng. Phù hợp nhất cho ứng dụng nhiều màn hình hoặc quy trình dùng TMS (Trados, Crowdin, Lokalise).
• Lingui: tích hợp TypeScript tốt, trích xuất chuỗi lúc biên dịch. Phù hợp với nhóm coi trọng type safety.

Cả ba đều xuất file dịch dạng JSON. Người dịch tiếng Việt có thể làm việc với bất kỳ thư viện nào mà không cần đụng vào code.

Quy tắc số nhiều trong tiếng Việt hoạt động thế nào trong i18n?

Theo quy tắc số nhiều Unicode CLDR, tiếng Việt có hai loại: one (n = 0 hoặc 1) và other (mọi giá trị còn lại). Tuy nhiên, danh từ tiếng Việt không thay đổi hình thức. "1 sản phẩm" và "5 sản phẩm" dùng cùng từ "sản phẩm". Trong thực tế, bản dịch other phục vụ được mọi trường hợp, và bạn chỉ cần một mục riêng cho trạng thái trống:

// File dịch i18n-js: vi.json
{
  "cart": {
    "items_zero": "Giỏ hàng trống",
    "items_one":  "{{count}} sản phẩm",
    "items_other":"{{count}} sản phẩm"
  }
}

Lưu ý items_one và items_other giống hệt nhau - đây là chủ ý. Loại từ tiếng Việt (cái, con, chiếc) thay đổi theo loại danh từ nhưng là thuộc tính cố định của từng danh từ, không phải quy tắc ngữ pháp thay đổi theo số lượng. Dịch máy thường chọn sai loại từ, và đây là lỗi mà người kiểm tra bản ngữ phát hiện ngay.

Định dạng tiền tệ VND và ngày tháng trong React Native

JavaScript Intl.NumberFormat hoạt động trên cả iOS và Android qua JSC/Hermes. Với VND, đặt maximumFractionDigits: 0 - đồng Việt Nam không có đơn vị nhỏ hơn. Tiếng Việt dùng dấu chấm (.) phân cách hàng nghìn và dấu phẩy (,) cho số thập phân, ngược với tiếng Anh:

const vndFmt = new Intl.NumberFormat('vi-VN', {
  style: 'currency',
  currency: 'VND',
  maximumFractionDigits: 0,
});

vndFmt.format(1250000); // "1.250.000 ₫"

Bỏ qua maximumFractionDigits: 0 sẽ cho ra "1.250.000,00 ₫" sai trên một số phiên bản runtime. Luôn khai báo tường minh.

Ngày tháng tiếng Việt theo thứ tự ngày-tháng-năm. Ngày 11 tháng 10 năm 2026 là "11/10/2026". Hiển thị "10/11" sẽ bị người dùng Việt đọc là ngày 10 tháng 11. Dùng Intl.DateTimeFormat với locale vi-VN hoặc thư viện date-fns với locale vi.

Tại sao văn bản tiếng Việt chiếm nhiều không gian hơn tiếng Anh?

Tiếng Việt kết hợp chữ cái gốc với tối đa hai dấu chồng. Ký tự "ộ" (o + mũ + chấm dưới) trực quan rộng hơn chữ Latin thường. Chuỗi tiếng Việt trung bình dài hơn 20-30% so với tiếng Anh tương đương. "Settings" (8 ký tự) thành "Cài đặt" (7 ký tự nhưng rộng hơn), "Notifications" thành "Thông báo".

Xây dựng layout Flexbox với chiều rộng linh hoạt. Dùng flex: 1 thay vì width cố định cho nút và tab. Kiểm tra với locale tiếng Việt trước khi phát hành. Báo cáo DataReportal 2025 về Việt Nam ghi nhận 127 triệu kết nối di động trên 101 triệu dân. Đây là thị trường lớn với người dùng chủ yếu truy cập qua điện thoại.

Những gì nhóm kỹ thuật tự làm được và khi nào cần chuyên gia bản ngữ

Toàn bộ pipeline kỹ thuật - expo-localization, thư viện i18n, Intl formatting - nằm trong tầm tay của đội lập trình và chỉ mất vài giờ. Kết quả sẽ hợp lệ về cú pháp. Nơi bản dịch không phải bản ngữ thường yếu:

• Sai văn phong: Phần mềm doanh nghiệp dùng từ Hán Việt; ứng dụng tiêu dùng dùng tiếng Việt thuần. Dịch máy thường trộn lẫn hai loại, tạo cảm giác thiếu nhất quán.
• Sai loại từ: "Con" đi với động vật, "cái" đi với đồ vật, "chiếc" đi với phương tiện. Dịch máy chọn sai loại từ thường xuyên và người dùng bản ngữ nhận ra ngay.
• Các trường hợp biên: Thông báo lỗi, trạng thái trống, hộp xác nhận cần tiếng Việt tự nhiên. Ngôn từ lủng củng ở đây làm mất niềm tin người dùng ngay lúc quan trọng nhất.

Một lượt kiểm tra của chuyên gia bản địa hóa tiếng Việt sau bước dịch máy sẽ phát hiện hầu hết các vấn đề. Với ứng dụng tài chính, y tế hoặc pháp lý, hãy xây dựng bảng thuật ngữ trước khi dịch để đảm bảo nhất quán.

Câu hỏi thường gặp

Nguồn

• Hướng dẫn Expo Localization - gói expo-localization, API getLocales(), các thư viện dịch được khuyến nghị. Đã kiểm tra Tháng 11 năm 2026.
• MDN Intl.NumberFormat - tùy chọn định dạng tiền tệ, maximumFractionDigits. Đã kiểm tra Tháng 11 năm 2026.
• Quy tắc số nhiều Unicode CLDR - phân loại số nhiều tiếng Việt (one/other). Đã kiểm tra Tháng 11 năm 2026.
• DataReportal Digital 2025: Việt Nam - 127 triệu kết nối di động, 101 triệu dân số, 79,8 triệu người dùng internet. Đã kiểm tra Tháng 11 năm 2026.