Học react native trên windows

Hôm nay topweb.store hướng dẫn các bạn cài đặt môi trường lập trình React native trên windows như sau.

• Bước 1: Cài đặt chocolate
• Bước 2: Cài đặt Node, Python2, JDK trên Windows
• Bước 3: Cài đặt React Native CLI
• Bước 4: Cài đặt Android Studio
• Bước 5: Cài đặt Android SDK
• Bước 6: Cấu hình ANDROID_HOME environment variable
• Bước 7: Thêm platform-tools vào Path

Bước 1: Cài đặt chocolate

Bạn xem chi tiết ở đây nhé: https://topweb.store/huong-dan-cai-dat-chocolatey-tren-windows

Bước 2: Cài đặt Node, Python2, JDK trên Windows

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

Bước 3: Cài đặt React Native CLI

Sau khi bạn cài Node ở bước trên, khởi động lại cmd và 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

Bước 4: Cài đặt Android Studio

Download Android Studio tại đây: https://developer.android.com/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

Bước 5: 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.

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.

Bước 6: 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.

Bước 7: 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

cài đặt Android để lập trình React Native trên Windows

Đóng các màn hình của việc setup biến môi trường Android trong window lại,
như vậy chúng ta đã hoàn thành mọi thứ của việc cài đặt Android để lập trình React Native trên Windows.
Chúc các bạn thành công!

topweb.store ra đời với mong muốn chia sẽ kiến thức - kinh nghiệm đến đông đảo bạn đọc đam mê lập trình web, khao khát mang đến những sản phẩm - dịch vụ tốt nhất và những trải nghiệm thú vị.

Dưới đây là các bước hướng dẫn cài đặt React Native trên Windows cho các bạn sử dụng máy Windows để code App React Native nên tập chung cài đặt cho Windows và Android.

1. Download và cài đặt các công cụ cần thiết

Trong bài viết, Appwe hướng dẫn các bạn cài đặt React Native 0.39 và Nodejs 7.2.1, JDK 8u112.

>> Xem thêm: Nên Thiết kế ứng dụng bằng Flutter hay React Native?

• Python:  https://www.python.org/downloads/

• Nodejs:  https://nodejs.org/en/

• JDK: http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

• Android  studio: https://developer.android.com/studio/index.html

• Devices: IntelAndroidDrvSetup1.10.0

• Git: https://git-scm.com/downloads

• Editor: Atom || Sublime Text || Visual studio code || Webstorm …

2. Thêm biến môi trường JDK & Android SDK

Java SDK: Windows → Search → System → Advanced System Settings → Environment variables → New

JAVA_HOME: C:\Program Files\Java\jdk1.8.0_111

• Android SDK: tạo biến tương tự như JAVA_HOME.

ANDROID_HOME: C:\Users\enqtran\AppData\Local\Android\Sdk 

Lưu ý: tên enqtran sẽ là tên user máy tính của các bạn. Nên cài đặt môi trường Path luôn cho jdk và android sdk, build-tool.

3. Cấu hình Android Virtual Device

• Mở Android Studio

• Download các thành phần cần thiết cho Android 6.0 (Marshmallow).

• Thành phần cần có: Google APIs, Intel x86 Atom System Image, Intel x86 Atom_64 System Image,Google APIs Intel x86 Atom_64 System Image, Android SDK Build-Tools 23.0.1, HAXM

• Tạo một Android Studio project ( sau nay tạo project React native rồi thì sẽ mở thư lục android trong source react native ) .

• Tạo Android Virtual Device: Manage AVD → Create

• Chạy Android Virtual Device

Các bạn chạy các lệnh như sau trên CMD Window

Nếu cần can thiệp vào mã nguồn gốc:

• npm install -g react-native-cli

• react-native init NameProject

• cd  NameProject

• react-native start

• react-native run-android

• react-native run-ios

Sau khi cài đặt những bước trên thì trên máy ảo Android sẽ xuất hiện màn hình báo thành công.

Trên là các bước cài đặt React Native trên Windows cho Android Appwe vừa chia sẻ. Mọi vấn đề liên quan đến thiết kế App Mobile, bạn có thể trao đổi với chúng tôi qua Fanpage "Thiết kế ứng dụng di động uy tín Hà Nội - Appwe". 

Chúc các bạn thành công.

Có thể bạn quan tâm: