Chúng ta có thể thiết lập và làm việc với một dự án React Native trên hệ thống Windows của mình theo hai cách khác nhau: Sử dụng Expo CLI và sử dụng React Native CLI.
Nếu bạn là người mới bắt đầu, Expo CLI sẽ là lựa chọn tương thích tốt nhất. Bởi vì thiết lập môi trường cho cả Android và iOS đều do Expo xử lý ở đây.
Trong một dự án được xây dựng bằng React Native CLI, ta có thể tìm thấy hai thư mục android và ios trong thư mục dự án để tùy chỉnh ứng dụng cho cả hai nền tảng.
Ở đây ta sẽ sử dụng React Native CLI để cài đặt và thiết lập dự án React Native trên hệ thống Windows 10.
Điều kiện tiên quyết
Để tiếp tục với bài viết này, người đọc phải biết những kiến thức cơ bản về cách làm việc với Command Prompt / Powershell trong hệ thống Windows 10.
Chúng ta sẽ học gì?
Ở đây trong bài viết này, chúng ta sẽ tìm hiểu những điều sau:
- Cài đặt trình quản lý gói Chocolatey trên Windows 10
- Cài đặt Node.js, Python2 và JDK8 bằng Chocalatey
- Cài đặt Android Studio
- Thiết lập SDK Android
- Cài đặt React Native CLI
- Tạo một ứng dụng React Native mới
- Thiết lập thiết bị Android
- Chạy ứng dụng React Native mà chúng tôi đã tạo
Cài đặt Chocolatey
Chocolatey là một trình quản lý gói phổ biến dành cho Windows. Để cài đặt Chocolaty, hãy mở Command Prompt với đặc quyền của quản trị viên và chạy lệnh bên dưới.
@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"Cài đặt Node, Python2 và JDK8
Bây giờ chúng ta cần cài đặt Nodejs, Python2 và JDK bằng Chocolaty. Điều này có thể được thực hiện bằng cách sử dụng lệnh dưới đây.
choco install -y nodejs.install python2 jdk8
Cài đặt Android Studio
Android studio cần được cài đặt để làm việc với phát triển React Native. Chúng tôi có thể dễ dàng tải xuống và cài đặt nó từ https://developer.android.com/studio.
Thiết lập Android SDK
Android Studio cài đặt SDK Android mới nhất theo mặc định. Tuy nhiên, việc xây dựng một ứng dụng React Native yêu cầu Android 11.0 (R) SDK.
Có thể truy cập Trình quản lý SDK từ màn hình Welcome to Android Studio với Android Studio.
Nhấp vào Configure, sau đó chọn SDK Manager.
Trình quản lý SDK -> Nền tảng SDK
sau đó chọn hộp bên cạnh “Show Package Details” ở góc dưới cùng bên phải. Tìm kiếm và mở rộng mục nhập Android 11.0 (R), sau đó đảm bảo rằng tất cả các mục sau đã được chọn:
- Android SDK Platform 26
- Google APIs Intel x86 Atom_64 System Image
Click chuột phải vào This PC -> Advanced system settings -> Click chọn environment variable -> Nhấp vào New để tạo biến người dùng ANDROID_HOME mới trỏ đến đường dẫn đến Android SDK của bạn:
c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk
Cài đặt React Native CLI
Chúng ta có thể dễ dàng cài đặt React Native CLI bằng NPM. Vì vậy, hãy cài đặt nó bằng lệnh dưới đây trên Command Prompt / Powershell trên hệ thống của chúng ta.
npm install -g react-native-cli
Tạo một ứng dụng mới
Sử dụng react native CLI có thể tạo một dự án React Native mới.
react-native init AwesomeProject
Ở đây AwesomeProject là tên dự án mà tôi đã chọn.
Thiết lập thiết bị Android
Bây giờ chúng ta có thể chạy dự án mà chúng ta đã tạo trên điện thoại Android của mình. Đối với điều này, trước tiên chúng ta cần thiết lập thiết bị di động của mình.
Chúng ta cũng có thể chạy ứng dụng Thiết bị ảo Android (AVD) có thể được tạo từ Android Studio. Nhưng tôi không giải thích nó trong hướng dẫn này.
Chúng ta cần bật USB debugging trong thiết bị Android của mình để chạy ứng dụng React Native mà mình đã tạo:
- Trên thiết bị Android, chọn Settings->About
- Chúng ta có thể thấy menu Build Version ở đó
- Tiếp tục nhấp vào tùy chọn Build Version cho đến khi nó bật tùy chọn Developer options.
- Bây giờ, quay lại Settings và nhấp vào menu Developer options ở đó.
- Bật tùy chọn USB debugging trong Developer options.
Kết nối thiết bị di động của chúng ta với hệ thống Windows bằng cáp USB. Nhập lệnh dưới đây để xác minh xem thiết bị di động đã được kết nối hay chưa.
adb devices
Chạy ứng dụng React Native
Bây giờ, hãy thực hiện lệnh dưới đây để chạy ứng dụng trên thiết bị di động của chúng tôi.
react-native run-android
Chúng tôi khuyên bạn nên sử dụng Visual Studio Code làm trình chỉnh sửa mã nguồn để làm việc với các dự án React Native.
