Chạy máy thật iphone trên windows react native

How to Run React Native App On Real Device?

Bạn nên thử nghiệm ứng dụng của mình trên một thiết bị thực tế trước khi phát hành cho người dùng. Trong bài viết này, mình sẽ hướng dẫn bạn các bước cần thiết để chạy ứng dụng React Native của bạn trên một thiết bị và chuẩn bị sẵn sàng cho publish sản phẩm cuối cùng đến người dùng.

Chuẩn bị

Hãy chắc chắn rằng laptop và thiết bị của bạn dùng chung một mạng Wi-Fi.

IOS

Cách 1:

Bước 1: Kết nối thiết bị Iphone của mình vào máy tính thông qua cáp USB.

Bước 2: Cài đặt một thư viện cần thiết, cài đặt luôn ở Global nhé.

npm install -g ios-deploy

Bước 3: Kiểm tra các devices đang được kết nối bằng lệnh Xcode CLI.

xcrun instruments -s devices

Sau khi chạy xong câu lệnh trên, bạn sẽ có một danh sách devices bao gồm cả Device thật bạn vừa cắm vào cũng như những Simulator Device với device_name, OS version và udid của chúng dạng như sau:

• Viet27th (13.3.1) [415cc9d83ba8cc07dd36d358d1a654bffa51bc92]
• iPhone 11 Pro (13.2.2) [BF84E66F-AF38-4631-8BA2-123DD921E85A] (Simulator)

Bước 4: Chọn device mà bạn muốn và run app trên đó.

npx react-native run-ios --device "Viet27th (13.3.1)"

hoặc

npx react-native run-ios --udid 415cc9d83ba8cc07dd36d358d1a654bffa51bc92

Nếu cách này không được, gặp lỗi:

• Failed to build iOS project. We ran “xcodebuild” command but it exited with error code 65. To debug build logs further, consider building your app with Xcode.app, by opening ichi.xcworkspace.
• Failed to build iOS project. We ran “xcodebuild” command but it exited with error code 70. To debug build logs further, consider building your app with Xcode.app, by opening ichi.xcworkspace.

hay thử build bằng Xcode như bên dưới.

Cách 2: Build bằng Xcode

Cách này đơn giản hơn nhiều.

Bước 1: Kết nối thiết bị Iphone của mình vào máy tính thông qua cáp USB.

Bước 2:

Mở Xcode, trên Toolbar chọn Product -> Destination -> Tại IOS Device, chọn Device bạn vừa kết nối.

Sau đó ấn Command + B để Build project.

Nếu bạn gặp lỗi Signing for “project_name” requires a development team. Select a development team in the Signing & Capabilities editor thì tức là bạn chưa chọn Development team. Ở trong tab Signing & Capabilities -> Team chọn một tài khoản là được.

Cũng nhiều khi Xcode version không hỗ trợ cho iOS phiên bản hiện tại trên iPhone, gây ra lỗi iPhone is not available. Please reconnect the device, các bạn tham khảo link sau để fix nhé: Những lỗi thường gặp khi code React Native.

Untrusted Developer

Sau khi build xong, React Native app đã xuất hiện trên Iphone, bạn sẽ gặp một lỗi Untrusted Developer khi mở app.

Để mở được app vừa build trên Iphone, bạn vào phần Setting trên Iphone -> General ->Device Management -> Apple Development… -> Trust “Apple Development…” -> Trus -> Mở lại app -> Done

Android

Bước 1: Kết nối điện thoại chạy hệ điều hành Android với máy tính. Có 2 thể loại cáp kết nối giữa điện thoại với máy tính cần lưu ý:

• Hai đầu đều là Type-C
• Một đầu là Type-C đầu còn lại là USB

Bạn nên lưu ý rằng không cần biết đầu cắm vào điện thoại của bạn là đầu nào nhưng đầu cắm vào máy tính luôn phải là đầu USB nếu không đôi khi có thể gây lỗi không phát hiện được điện thoại mà bạn đã kết nối với máy tính.

Xem thêm vấn đề đó tại đây: Android studio on Mac cannot detect connected USB phone

Bước 2:

Sau khi đã kết nối điện thoại với máy tính, chạy cho mình lệnh sau để lấy ra danh sách các thiết bị có sẵn có thể build project trên đó:

Sau khi chạy lệnh trên, chúng ta sẽ lấy ra được một danh sách các thiết bị đang có sẵn như thế này:

List of devices attached
RF8NC0YF7KF device
emulator-5554 device

Thiết bị bắt đầu với emulator ở đầu là những thiết bị ảo, ở trong danh sách trên RF8NC0YF7KF device là thiết bị vật lý, là hàng thật sịn sò bạn vừa cắm vào khi nãy, nó thể hiện rằng bạn đã kết nối thành công điện thoại với máy tính. Nếu không phát hiện được thiết bị vật lý trong danh trên thì phải bật được chức năng Developer options trên điện thoại của bạn theo các bước sau:

Vào Settings kéo xuống About phone trên điện thoại, nếu bên dưới About phone không có mục Developer options thì tức là nó chưa được bật lên, để bật nó lên thì tiếp tục click vào About phone -> Software information -> ấn liên tục nhiều lần vào Build number cho đến khi màn hình hỏi mã PIN hiện ra, nhập mật khẩu của điện thoại vào. Khi Developer options được activated, bạn sẽ thấy thông báo You are now a developer

Quay lại màn hình Setting, kéo xuống dưới, ở dưới About phone đã có thêm tùy chọn Developer options, click vào để mở Developer options và bật tính năng USB debugging lên. Lúc này mọi cài đặt cần thiết đã hoàn tất.

Tiếp theo, chạy lại lệnh

Nếu list divices hiện ra vẫn không có thiết bị điện thoại của bạn, hãy kiểm tra lại kết nối giữa máy tính với điện thoại và chắc chắn rằng đầu kết nối với máy tính phải là USB. Trường hợp lỗi của mình là mình có máy tính Macbook chỉ hỗ trợ cổng Type-C và một điện thoại Samsung chân Type-C. Mình hí hửng cắm cái dây 2 đầu đều là Type-C để kết nối trực tiếp giữa điện thoại và Macbook nhưng mà không được. Sau đó mình phải dùng dây một đầu là Type-C và một đầu là USB, đầu Type-C để cắm vào điện thoại, đầu USB để cắm vào Hub chuyển đổi, sau đó mới cắm Hub chuyển đổi này vào Macbook cũng chân Type-C.

Nếu list divices đã phát hiện ra thiết bị vật lý của bạn, chỉ cần chạy lệnh npx react-native run-android là nó sẽ tự build trên thiết bị thật đang cắm vào.

Tham khảo

https://reactnative.dev/docs/running-on-device

https://www.decoide.org/react-native/docs/running-on-device-android.html

https://stackoverflow.com/questions/41468370/android-studio-on-mac-cannot-detect-connected-usb-phone

Lời kết

Với hướng dẫn trên, bạn đã có thể kiểm tra dự án của mình sẽ hoạt động thế nào trên một thiết bị thật rồi. Hãy kiểm tra thật kỹ sản phẩm của mình trước khi publish đến tay người dùng nhé.