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

Bài này hướng dẫn các bạn cách cài đặt môi trường lập trình React Native trên hệ điều hành Windows. Nếu bạn sử dụng Linux thì tham khảo tại đây: Cài đặt React Native trên Linux, nếu bạn sử dụng MacOsx thì tham khảo tại đây: Cài đặt môi trường lập trình React Native trên MacOs

Trên windows bạn chỉ có thể lập trình React Native với bản Android mà thôi, Nếu muốn lập trình IOS nữa thì có 1 số cách như sau: Mua máy Mac, Cài Haskintosh, Code ứng dụng thuần 100% js =)) (tuy nhiên cuối cùng vẫn phải Build bằng MacOs). Và ở đây tôi hướng dẫn bạn sử dụng React Native CLI chứ không sử dụng Expo.

Cài đặt react native trên Windows

Installing dependencies

Bạn cần có Node, Shell (terminal để có thể thao tác dòng lệnh với React native), Python2, bộ JDK, và Android Studio.

Dù cho chúng ta sử dụng bất kỳ công cụ IDE nào để soạn thảo code React Native thì vẫn cần có Android Studio để thao tác một số tác vụ cần thiết

Cài đặt Node, Python2, JDK trên Windows

Chúng ta có thể download từng phần mềm ở trên và cài đặt bình thường trên Windows, tuy nhiên ở đây tôi khuyên bạn nên sử dụng https://chocolatey.org/ để cài đặt Node và Python2, Chocolatey là một phần mềm quản lý gói phổ biến cho Windows

React Native cũng yêu cầu một phiên bản mới nhất của Java SE Development Kit (JDK), cũng như Python 2. Cả hai phần mềm này đều có thể được cài đặt bằng Chocolatey.

Mở terminal của windows (cmd) với quyền Administrator (Run as Administrator) và chạy dòng lệnh dưới đây

choco install -y nodejs.install python2 jdk8

Nếu bạn đã cài đặt Node trên hệ thống của mình, hãy đảm bảo rằng đó là Node 8.3 hoặc bản mới hơn. Nếu bạn đã có JDK trên hệ thống của mình, hãy đảm bảo rằng đó là phiên bản 8 hoặc mới hơn. Nếu cũ hơn thì gỡ bỏ đi trước khi cài lệnh trên

Cài đặt React Native CLI

Sau khi bạn cài Node ở bước trên, hãy sử dụng npm để thao tác cài đặt React Native CLI bằng dòng lệnh:

npm install -g react-native-cli

Nếu bạn gặp lỗi Cannot find module 'npmlog' hãy thử cài trực tiếp với lệnh curl -0 -L https://npmjs.org/install.sh | sudo sh.

Cài đặt Android development environment

Nếu bạn đã quen với việc phát triển Android, có một số phận bạn có thể đã cấu hình. Tuy nhiên, bạn vẫn nên vui lòng đảm bảo cẩn thận làm theo các bước dưới đây.

Cài đặt Android Studio

Download Android Studio.

Khi cài đặt, hãy Chọn một thiết lập “Tùy chỉnh” (Custom) khi được nhắc chọn loại cài đặt. Đảm bảo các mục sau đây được chọn:

• Android SDK
• Android SDK Platform
• Performance (Intel ® HAXM)
• Android Virtual Device (phần này có thể thay thế bởi Genymotion: https://www.genymotion.com/)

Thực hiện các bước theo hướng dẫn trên màn hình cài đặt cho đến khi hoàn thành cài đặt Android Studio

Cài đặt Android SDK

Mặc định Android Studio sẽ cài đặt bản Android SDK mới nhất. Tuy nhiên, việc xây dựng ứng dụng trên React Native yêu cầu sử dụng Android Sdk 9 (Pie). Các phiên bản khác của Android Sdk có thể được chủ động bổ sung cài thêm qua Android Sdk Manage trong Android Studio.

Có thể bật Android Studio và quản lý SDK theo menu Appearance & Behavior → System Settings → Android SDK.

Chọn cài đặt bản Android Sdk 9 (Pie), khi bật Android Sdk Manage hãy chọn tối thiểu 2 gói sau

• Android SDK Platform 28
• Intel x86 Atom_64 System Image or Google APIs Intel x86 Atom System Image

Tiếp theo, chọn tab “SDK Tools” và chọn hộp thoại bên cạnh “Show Package Details” . Tìm kiếm và mở rộng mục “Android SDK Build-Tools”, sau đó đảm bảo rằng 28.0.3 được chọn.

Cuối cùng, nhấp vào “Apply” để tải xuống và cài đặt Android SDK và các công cụ build liên quan.

Cấu hình ANDROID_HOME environment variable

Các công cụ React Native yêu cầu một số biến môi trường được thiết lập để xây dựng các ứng dụng với Native Code.

Cài đặt biến môi trường ANDROID_HOME trên windows

Thay thế giá trị trên bằng SDK của bạn, Sdk được cài đặt trong thư mục sau

C:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk

Bạn có thể tìm vị trí thực tế của SDK trong Android Studio bằng cách: click vào “Preferences” và chọn menu Appearance & Behavior → System Settings → Android SDK.  Sau đó copy và dán vào ô bên trên

Thêm platform-tools vào Path

Hãy vào phần biến môi trường của Windows như bước trên, và chọn biến Path , sau đó click Edit và chọn New để nhập thêm platform-tools vào biến Path. Đường dẫn của thư mục platform-tools có cấu trúc như sau

C:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk\platform-tools

Đóng các màn hình của việc setup biến môi trường Android trong window lại, và có thể nói nếu không sai bước nào thì là xong xuôi mọi thứ của việc cài đặt Android để lập trình React Native trên Windows.