Cài đặt môi trường phát triển React Native trên Windows và cách giải quyết lỗi

Bắt đầu với cài đặt môi trường

Để bắt đầu, hãy đảm bảo bạn tuân theo các yêu cầu từ trang web chính thức của React Native và sử dụng mạng riêng ảo (VPN) nếu cần.

1. Node.js

Phiên bản Node.js phải lớn hơn hoặc bằng 16. Sử dụng nvm để quản lý phiên bản Node.js. Bạn có thể kiểm tra phiên bản hiện tại bằng lệnh sau:

node -v

2. Java SDK

Tùy thuộc vào phiên bản React Native mà bạn đang sử dụng:

  • Nếu phiên bản React Native nhỏ hơn 0.67, bạn cần JDK 8.
  • Nếu phiên bản React Native lớn hơn hoặc bằng 0.67, bạn cần JDK 11.

Kiểm tra phiên bản Java đã cài đặt bằng lệnh:

javac -version

3. Yarn

Cài đặt Yarn để tăng tốc độ tải xuống các module Node.js:

npm install -g yarn

4. Môi trường Android

4.1 Tải xuống và cài đặt Android Studio

Sau khi cài đặt xong:

  1. Mở menu Tools > SDK Manager.
  2. Chọn các thành phần cần thiết như sau:
  • SDK Platforms: Android 13.0 ("Tiramisu")
  • SDK Tools: Android SDK Build-Tools 34

Đừng quên kiểm tra tùy chọn "Show Package Details" ở góc dưới bên phải trước khi áp dụng thay đổi.

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

Theo dõi tài liệu chính thức để cấu hình các biến môi trường liên quan đến Android SDK.

5. Tạo dự án

5.1 Khởi tạo dự án

npx react-native@latest init MyProject

5.2 Chạy ứng dụng

cd MyProject
yarn android

6. Giải quyết lỗi thường gặp

Lỗi: Không thể khởi chạy trình giả lập. Lý do: Không tìm thấy trình giả lập nào trong kết quả của `emulator -list-avds`

Giải pháp:

  • Đảm bảo rằng bạn đã cài đặt đúng phiên bản Java và Android SDK.
  • Tạo một thiết bị ảo (AVD) mới thông qua Android Studio:
    1. Mở Android Studio.
    2. Chọn menu Tools > Device Manager.
    3. Click "Create Device" và làm theo hướng dẫn.

Lỗi: Không thể xác định phụ thuộc của null

Đảm bảo phiên bản Java SDK phù hợp với phiên bản React Native mà bạn đang sử dụng.

Lỗi: Không thể giải quyết tất cả phụ thuộc cho cấu hình ':classpath'

Thêm các kho lưu trữ sau vào tệp android/build.gradle:


allprojects {
    repositories {
        maven { url 'https://maven.aliyun.com/repository/google' }
        maven { url 'https://maven.aliyun.com/repository/public' }
    }
}

Lỗi: Thực thi thất bại cho tác vụ ‘:app:checkDebugAarMetadata’

Thiết lập mạng riêng ảo (VPN) và thử lại lệnh yarn android.

Lỗi: 'react-native' không được nhận diện là một lệnh

Thực thi lệnh sau để tạo gói:


npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

Thẻ: ReactNative Windows AndroidSDK

Đăng vào ngày 3 tháng 6 lúc 02:12