Xây dựng ứng dụng React Native ngoại tuyến: Cách tiếp cận cổ điển

Tác giả: Panth Solanki

Chúng ta đều biết, đã đến lúc học React Native. Có hai cách phát triển theo tài liệu. Phần này tập trung tạo ứng dụng trong Expo, trực tiếp trên thiết bị Android không cần kết nối internet trên thiết bị.

Tôi biết rất dễ dùng Expo Client app trên thiết bị có internet, nhưng nếu gặp sự cố internet? Bạn không muốn dùng MB hạn chế cho phát triển. Vậy nếu WiFi di động không ổn định, hoặc bạn chỉ muốn phát triển app kiểu cũ… hay lý do khác?

Hãy bắt đầu, quy trình chỉ bao gồm ba bước nhỏ. Nhớ rằng, chỉ dành cho phát triển trên Windows OS và target Android OS.

Yêu cầu thiết lập trước

Bạn cần cài driver adb trên PC từ đây. Quy trình cũng đây.

Sau khi hoàn tất, kết nối điện thoại với PC. Mở Command Prompt và chạy lệnh adb devices. Nếu trả về tên thiết bị dưới list of devices, thiết lập xong. Nếu không hiện tên, cần cài driver adb đúng.

Lưu ý: Điện thoại phải bật USB debugging trong developer options.

Cài Expo Client App từ Play Store đây.

Thiết lập dự án React Native

Làm theo bước trong docs đây.

Tôi chỉ copy bước đây. Giả sử bạn cài Node 10+, chạy lệnh:

npm install -g expo-cli

expo init AwesomeProject

cd AwesomeProject

npm start

Các lệnh trên mở trình duyệt với https://localhost:19002 (nếu không tự mở, mở thủ công).

Mở localhost, sẽ hiện thông báo Tunnel Ready như dưới:

Xây dựng ứng dụng React Native ngoại tuyến: Cách tiếp cận cổ điển Tunnel Ready nghĩa là đến lúc tạo phép màu :)

Các bước sau thiết lập

Bây giờ kết nối thiết bị và mở command prompt khác chạy lệnh:

adb devices // tìm tên thiết bị đã kết nối

adb -s reverse tcp:8081 tcp:8081 // không in gì

Vào https://localhost:19002 trong trình duyệt và nhấp Run on Android device/emulator.

Xây dựng ứng dụng React Native ngoại tuyến: Cách tiếp cận cổ điển Nhấp Run on Android device/emulator để thấy phép màu trên thiết bị

Bây giờ bạn thấy bundles tải trên thiết bị. Sau khi tải xong, app sẽ chạy trên thiết bị và trình duyệt như sau:

Xây dựng ứng dụng React Native ngoại tuyến: Cách tiếp cận cổ điển Thanh bên sẽ hiển thị thiết bị

Bạn gỡ lỗi app bằng nhấp nút góc trên bên phải.

Xây dựng ứng dụng React Native ngoại tuyến: Cách tiếp cận cổ điển Nhấp nút góc trên bên phải và xem dữ liệu truyền đến thiết bị.

Tôi sẽ vui nếu thông tin hữu ích cho bạn. Nếu có câu hỏi, comment – tôi rất sẵn lòng giúp.

Cảm ơn đã đọc.

Học lập trình miễn phí. Chương trình mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người tìm được việc làm với tư cách là nhà phát triển. Bắt đầu ngay