React Native với Expo

Bạn đang muốn xây dựng một ứng dụng mobile (iOS/Android), bạn biết React Native nhưng quá trình build/test lại khá rườm rà và mất nhiều thời gian. Expo tối ưu hóa quá trình phát triển ứng dụng, giúp bạn tiết kiệm đáng kể thời gian – Bắt đầu react native với Expo.

Expo là gì?

Tạm dịch: Expo là một framework opensource(mã nguồn mở) và miễn phí được xây dựng xung quanh React Native để giúp bạn xây dựng các dự án iOS và Android bằng JavaScript và React.

Cơ chế hoạt động: Expo giống như lớp vỏ bao quanh lõi React Native API, nó giúp chúng ta dễ dàng khởi tạo, phát triển và kiểm thử một cách nhanh chóng các ứng dụng React Native. Tất cả code bạn viết sẽ được chạy thông qua bộ kit do Expo phát triển được gọi là Expo SDK.

Nhược điểm của Expo

Trước khi bắt đầu thì hãy điểm qua một số nhược điểm của Expo, bởi vì chúng có khá nhiều mặt hạn chế. Và nếu ứng dụng của bạn cần một thứ cụ thể, bạn phải kiểm tra xem Expo có hỗ trợ nó hay không. Vì vậy, bạn có thể biết rằng bạn không nên cân nhắc sử dụng Expo ngay từ đầu.

Expo có một trang để viết về những mặt hạn chế của chính họ. Ở đây tôi chỉ liệt kê vài nhược điểm lớn nhất và nó sẽ phần lớn quyết định có nên sử dụng Expo cho dự án của mình hay là không. Bạn có thể xem tất cả các hạn chế tại đây.

1. Bị hạn chế khi chỉ sử dụng được các API mà Expo SDK hỗ trợ: Điều này có nghĩa là khi ứng dụng của bạn muốn tương tác với với API React Native gốc bất kỳ mà không có trong Expo SDK thì chỉ còn cách eject và sử dụng thuần React Native.
2. Không thể sử dụng Native Module: Đối với các ứng dụng React Native, đôi khi có những chức năng mà cần phải chọc vào API Platform mà React native chưa hỗ trợ. Expo thuần sẽ không đáp ứng được.
3. Phụ thuộc hoàn toàn vào bộ công cụ của Expo: Không thể phủ nhận bộ công cụ của Expo giúp bắt đầu và xây dựng các ứng dụng React Native một cách thuận tiện và nhanh chóng. Nhưng điều này lại làm trói buộc bạn, ví dụ: Khi build release iOS (.ipa) và Android (.apk/.bundle) phải thông qua công cụ build của Expo, để được build phải vào hàng đợi nếu trước đó có nhiều người cũng build giống bạn.

Nếu những nhược điểm của Expo đều không ảnh hưởng gì tới dự án của bạn thì “Bắt đầu React Native với Expo” thôi ^^

Cài đặt expo

Lưu ý: Expo chạy phụ thuộc vào nodejs nên hãy chắc chắn rằng bạn đã cài nodejs trước khi cài đặt Expo nhé.

– Cài đặt ứng dụng Expo Go: Ứng dụng sẽ giúp chạy các dự án của bạn trên các thiết bị di động một cách nhanh chóng chỉ cần quét mã QR là xong. Tải xuống từ App Store hoặc Google Play.

– Cài đặt Expo CLI: Expo CLI là một ứng dụng dòng lệnh là giao diện chính giữa nhà phát triển và các công cụ Expo. Expo CLI cũng có GUI dựa trên web bật lên trong trình duyệt web của bạn khi bạn bắt đầu dự án của mình – bạn có thể sử dụng GUI thay vì giao diện dòng lệnh nếu bạn chưa cảm thấy thoải mái khi sử dụng thiết bị đầu cuối hoặc thích GUI hơn, cả hai đều tương tự các khả năng.

npm install --global expo-cli

Tạo ứng dụng Expo

Tạo một ứng dụng mới có tên là “my-app”. Mặc định khi tạo bằng lệnh này sẽ là “blank template” của Expo:

# Create a project named my-app. Select the "blank" template when prompted.
expo init my-app

# Navigate to the project directory.
cd my-app

Khởi chạy dự án React Native với Expo

expo start

Khi bạn chạy expo start(hoặc npm start), Expo CLI khởi động Metro Bundler, là một máy chủ HTTP biên dịch mã JavaScript của ứng dụng của bạn bằng Babel và cung cấp nó cho ứng dụng Expo.

Mở ứng dụng Expo Go trên các thiết bị di động

Bạn có thể mở dự án trên nhiều thiết bị cùng một lúc.

• Trên các thiết bị chạy iOS, mở ứng dụng Camera mặc định và tiến hành quét mã QR dự án của bạn.
• Tên các thiết bị chạy Android, chọn “Scan QR Code” trong ứng dụng Expo Go và quét mã QR dự án của bạn.

Lần đầu chạy sẽ hơi lâu vì phải đợi “Building JavaScript bundle”, từ những lần sau thì sẽ không phải load lại nữa.

Trên đây mình vừa hướng dẫn tạo mới và khởi chạy ứng dụng React Native với Expo, trong các bài tiếp theo mình sẽ nói thêm về build release, thư viện và typescripts trong React Native với Expo.

Cảm ơn mọi người!