Cài đặt React Native trên môi trường Windows

A. Những thành phần cần thiết

Bạn cần phải có :

Node
Python2
JDK
Android Studio

React Native khuyên cài Node, Java SE Development Kit (JDK) và Python2 thông qua Chocolatey, đây là ứng dụng phổ biến cho Windows

Câu lệnh cài đặt trên Chocolatey như sau ( chạy CMD với quyền "Run as Administrator"): choco install -y nodejs.install python2 jdk8

B. The React Native CLI (CLI-command line interface)

Chạy lệnh CMD sau để cài đặt React Native CLI: npm install -g react-native-cli

C. Cài đặt môi trường Android

1. Cài Android Studio

Tải Android Studio tại đây. Cài đặt và chọn các mục:

Android SDK
Android SDK Paltform
Performance (Intel ® HAXM) -- cho máy ảo
Android Virtual Device -- cho máy ảo 2 lựa chọn cuối dành cho máy ảo Android. Nếu bạn đã có thiết bị Android rồi thì không cần cài cũng được

Hoặc chỉ cài android SDK tại:

https://developer.android.com/studio/index.html#command-tools

2. Cài đặt Android SDK

Mặc định Android Studio sẽ cài Android SDK mới nhất nhưng trên trang chủ React Native ưu tiên sử dụng Android 6.0 (Marshmallow) SDK

Cấu hình cài đặt Android SDK ở màn "Welcome to Android Studio" chọn "Configure" và sau đó ấn "SDK Manager"

Nếu bạn đang mở Project nào đó thì ấn "Tools" sau đó "SDK Manager"

Tìm đến Android 6.0 (Marshmallow) chọn các mục dưới đây để tải về:

Google APIs
Android SDK Platform 23
Intel x86 Atom_64 System Image
Google APIs Intel x86 Atom_64 System Image

Tiếp, chọn tab "SDK Tools" ấn "Show Package Details", vào "Android SDK Build-Tools" chọn bản 23.0.1

Chọn "Apply" để bắt đầu tải và cài đặt Android SDK và Build Tools

3. Cấu hình ANDROID_HOME cho Windows

Để React Native build app bạn phải chỉ định chỗ bạn cài Android Sdk ở đâu. Bạn làm theo hướng dẫn sau

Thường thì SDK sẽ được cài ở

C:\Users\%USERNAME%\AppData\Local\Android\sdk

D. Tạo project

Bạn mở CMD và gõ lệnh sau

react-native init Dgn

Trong đó Dgn là tên project được tạo ra

I. Sử dụng thiết bị thật

Việc đầu tiên phải kiểm tra là thiết bị Android của bạn Wifi hoạt động tốt vì sắp tới bạn sẽ dùng chủ yếu bằng Wifi

Thứ 2, chọn dây cáp Android thật tốt rồi cắm Android vào máy tính

1. Bật USB debugging

Đầu tiên, thiết bị Android của bạn phải ở chế độ "Developer option". Bạn Vào Settings → About phone và click Build number 7 lần.

Sau đó, vào Settings → Developer options và chọn "USB debugging"

2. Kiểm tra connect với Android

Di chuyển vào thư mục SDK

C:\Users\%USERNAME%\AppData\Local\Android\sdk\platform-tools

Sau đó gõ lệnh adb devices

>>adb devices
List of devices attached
emulator-5554 offline   # Google emulator
14ed2fcc device         # Physical device

Hiện dòng tương tự như thế này thì bạn đã thành công 14ed2fcc device

3. Run app

Gõ lệnh sau trên CMD để cài và chạy app react-native run-android

Nếu bạn chạy xong lệnh này mà hiện lỗi sau

Hiện lỗi đến đây thì bạn đang làm đúng hướng dẫn rồi đấy

Ok. Vậy bạn làm các bước tiếp dưới đây

4. Kết nối với development server

Đến bước này phải chắc chắn là

USB debugging đã bật
Android đã connect với PC
Android và PC cùng chung 1 mạng nhé

a) Cách 1: Dùng adb reverse

Cách này dùng cho Android 5.0 (Lollipop) trở lên Chạy lệnh trên CMD như sau:

adb reverse tcp:8081 tcp:8081

Sau đó bạn lắc Android để hiện Developer menu như dưới đây

Debug JS Remotely: Tùy chọn này cho phép bạn debug ứng dụng react native trong trình duyệt Google Chrome.
Enable Live Reload: Tùy chọn này cho phép bạn xem lại các thay đổi trên Emulator/Physical Android Device ngay lập tức khi bạn lưu các thay đổi trong mã nguồn của mình. Ứng dụng của bạn sẽ load lại từ màn hình đầu tiên
Enable Hot Reloading: Tùy chọn này cũng cho phép bạn xem lại các thay đổi ngay lập tức trên Emulator/Physical Android Device nhưng sẽ không load lại từ đầu mà sẽ hiển thị ở màn hình mà bạn đang thay đổi code

Lắc máy để hiển thị Menu này

Debug qua ứng dụng Nox

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.

Kéo file apk-debug.apk vào NOX

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”.