React Native -Bài 1: Hướng dẫn cài đặt môi trường lập trình Android bằng React Native

Bài 1 – React Native – Hướng dẫn cài đặt môi trường lập trình Android bằng React Native

React Native là gì?

React Native được phát triển bởi Facebook. Facebook muốn tạo ra nền tảng phát triển ứng dụng di động đa nền tảng có hiệu năng không thua kém so với ứng dụng được phát triển độc lập cho từng nền tảng. React Native hiện tại chỉ hỗ trợ phát triển ứng dụng di động hệ điều hành Android và iOS. Hiện nay có khá nhiều ứng dụng trong và ngoài nước được phát triển dựa trên nền tảng này. Mình nói sơ vậy thôi chứ thật ra giới thiệu về React Native thì đã có khá nhiều bài viết về nó rồi. Bạn có thể lên Google và tìm từ khoá “React Native” là sẽ thấy một khối các bài viết liên quan.

Cài đặt môi trường lập trình:

Không lôi thôi nữa, mình vào vấn đề chính đây. Hôm nay, bài đầu tiên trong series React Native cơ bản này, mình xin hướng dẫn các bạn cách cài đặt môi trường để lập trình Android bằng React Native.

Đây là link hướng dẫn thiết lập môi trường tại trang chủ của React Native: Getting Started. Bạn nào rành tiếng Anh thì có thể vào trực tiếp link và đọc. Vì trên trang chủ họ đã hướng dẫn rất rõ ràng nên mình sẽ nói sơ qua các công đoạn chính.

Đầu tiên là cài đặt các gói cần thiết là Nodejs, Python2, JDK. Để cài đặt 3 gói này, họ khuyên chúng ta là nên cài đặt qua Chocolatey cho nên đầu tiên các bạn phải tải về và cài đặt Chocolatey trước. Sau khi cài xong, bạn mở cmd window lên (nhớ “Run as Administrator”) và gõ lệnh sau:

Tiếp đến là cài đặt React Native CLI. Chạy lệnh sau trong cmd hoặc Window Powershell

Cài đặt môi trường phát triển Android:

Cài đặt Android Studio:

Bạn tải về và cài đặt Android Studio. Mở file cài đặt, nhớ chọn Custom setup khi chọn loại cài đặt. Các mục sau đây bắt buộc phải được cài đặt:

  • Android SDK
  • Android SDK Platform
  • Performance (Intel ® HAXM)
  • Android Virtual Device (Phần này mình sẽ hướng các bạn run app debug bằng Nox vì nhiều khi máy tính bạn cấu hình không đủ mạnh để run được Emulator của Android Studio)

Sau khi cài đặt hoàn tất bạn hãy phần mềm Android Studio lên. Tại màn hình Wellcome to Android Studio, bạn click vào Configure dưới góc phải màn hình và chọn SDK Manager.

Tại màn hình SDK Manager, chọn tab “SDK Platforms”, các bạn tick chọn Android 6.0 (Marshmallow), mở rộng mục này ra và tick chọn các mục sau nằm trong nó:

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

Sau đó nhấn “Next” và chấp nhận cài đặt. Chờ cho nó tải về và cài đặt xong chúng ta sang bước tiếp theo.

Chuyển tiếp sáng tab “SDK Tools” tick chọn “Show Package Details” nhìn lên bảng hiển thị phía trên và tick chọn “Android SDK Build-Tools” version 23.0.1.

Nhấn “Apply” >> “OK” để tải về và cài đặt.

Cấu hình biến môi trường ANDROID_HOME:

Mở Controll Panel lên chọn mục “System and Security” >> “System” >> “Advanced system settings” > “Environment Variables”. Tiếp theo nhấn vào “New” và thêm đường dẫn và tên như hình bên dưới:

Đường dẫn “Variable value” có cấu trúc như sau:

Tạo thử một project để kiểm tra này:

Mở Window powsershell và mở giả lập máy android Emulator lên và chạy lần lượt các lệnh sau:

Thành quả của chúng ta sẽ được như sau:

Giới thiệu với các bạn đây là ứng dụng Phan Thanh Blog được mình viết bằng React Native cho chính website của mình.

Chúc các bạn thành công. Theo dõi mình để chờ bài hướng dẫn tiếp theo nhé. Phần đến mình sẽ hướng dẫn các bạn cách chạy file app debug trên điện thoại và trình giả lập Nox .

Series NavigationReact 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ề