• Home
  • React Native – Bài 3: Sử dụng Nox giả lập để chạy và debug code React Native

React Native – Bài 3: Sử dụng Nox giả lập để chạy và debug code React Native


Tháng Sáu 23, 2018 Bình luận 1315 Lượt xem

Chuyên mục:

Ở bài trước, mình đã hướng dẫn các bạn setup editor để lập trình React Native. Mình nghĩ là ai cũng có thể làm xong các bước trước rồi. Vậy hôm nay mình xin hướng dẫn các bạn dùng phần mềm giải lập Nox để run và debug code. Các bạn vào thư mục project app bài trước mình hướng dẫn chạy sau đó mở terminal hay cmd từ thư mục đó lên và gõ lệnh: react-native run android

Chờ cho cho đến khi nó chạy xong, các bạn thể thấy lỗi app-debug ở phần cuối cùng khi kết thúc. Tuy nhiên đừng lo đấy là do nó phát hiện ra thiết bị để cài đặt app-debug thôi.

Tiếp theo là tải về và cài đặt Nox. Sau khi cài đặt xong, các bạn mở Nox lên, chúng ta tiến hành cài đặt hệ thống cho nó một chút. Các bạn click vào biểu tượng settings phía góc phải trên màn hình Nox. Sau khi click vào bạn sẽ thấy màn hình như vầy hiện ra:

Các bạn chuyển sang tab cài đặt cao cấp. Phần “Cài đặt tính năng” các bạn chọn thấp cho mình nhé. Vì run app debug nên k cần phải set cao tốn bộ nhớ RAM. Phần “Khởi động cài đăt” chọn “bản di động” và chọn 480×800. Ở đây là mình hướng dẫn setting cho bạn nào dùng máy cấu hình thấp. Các bạn muôn trải nghiệm tốt hơn thì cài đặt cấu hình cao lên nhé.

Sau khi cài đặt thông số xong, bạn nhấn “Lưu cài đăt” và đồng ý khởi động lại phần mềm. Kết quả sẽ được như thế này.

Nguyên liệu đã có đủ chúng ta tiến hành làm bánh. Bạn mở thư mục project của react native lên vào theo link sau “project/android\app\build\outputs\apk” nhấn 2 lần vào file app-debug.apk để cài nó vào Nox. Chờ một lúc bạn sẽ thấy app đó trên Nox.

Và đây chính là cái app-debug.apk đó.

Giờ bạn hãy mở nó lên và nếu có thấy lỗi hiện lên thì đừng có lo lắng, vì còn vài thao tác nữa mới xong. Sau khi mở app lên bạn quay ra ngoài xem Nodejs có đang chạy không? Nếu không thì mở cửa sổ terminal lên và gõ tiếp lệnh npm start .

Quay lại cái app demo trên Nox của chúng ta. Các bạn vào biểu tượng 3 dấu gạch ngang trên màn hình Nox ở thanh công cụ bên phải, đó là nút Menu. Sẽ được như thế này.

Nhấn chọn “Dev Settings”, một màn hình mới hiện lên vào các bạn kéo xuống phần DEBUGGING nhân chọn “Debug server host & post for device”. Tiếp theo là bạn nhập theo cú pháp sau “<IP wifi của bạn>:8081”.

Sau đó nhấn “OK”. Các bạn tiếp tục nhấn Menu và chọn “Reload” là xong.

Chúc các bạn thành công. Bài sau mình sẽ đi vào phần đầu tiền là React Navigation. Mình sẽ không đi cụ thể các bài kiểu như kiến thức cơ bản. Vì những cái đó đã quá nhiều bài nói đến rồi. Ở đây mình sẽ hướng dẫn sử dụng cụ thể các cái Component có trong document của React Native.

Series Navigation<< React Native – Bài 2: Giới thiệu và hướng dẫn setup công cụ hỗ trợ lập trình React Native

Để lại bình luận

avatar
  Đăng ký theo dõi  
Thông báo về