React Native - Thiết lập môi trường

Có một số thứ bạn cần cài đặt để thiết lập môi trường cho React Native. Chúng tôi sẽ sử dụng OSX làm nền tảng xây dựng của mình.

Sr.No.	Phần mềm	Sự miêu tả
1	NodeJS và NPM	Bạn có thể làm theo hướng dẫn Thiết lập Môi trường NodeJS của chúng tôi để cài đặt NodeJS.

Bước 1: Cài đặt ứng dụng create-react-native

Sau khi cài đặt thành công NodeJS và NPM trong hệ thống của mình, bạn có thể tiến hành cài đặt ứng dụng create-react-native (trên toàn cầu như hình bên dưới).

C:\Users\Tutorialspoint> npm install -g create-react-native-app

Bước 2: Tạo dự án

Duyệt qua thư mục cần thiết và tạo một dự án gốc phản ứng mới như hình dưới đây.

C:\Users\Tutorialspoint>cd Desktop
C:\Users\Tutorialspoint\Desktop>create-react-native-app MyReactNative

Sau khi thực hiện lệnh trên, một thư mục có tên chỉ định được tạo với nội dung sau.

Bước 3: NodeJS Python Jdk8

Đảm bảo rằng bạn đã cài đặt Python NodeJS và jdk8 trong hệ thống của mình, nếu không, hãy cài đặt chúng. Ngoài những điều này, bạn nên cài đặt phiên bản mới nhất của sợi để tránh một số vấn đề.

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

Bạn có thể cài đặt giao diện dòng lệnh react native trên npm, sử dụng lệnh install -g react-native-cli như hình dưới đây.

npm install -g react-native-cli

Bước 5: Bắt đầu phản ứng gốc

Để xác minh cài đặt, hãy duyệt qua thư mục dự án và thử khởi động dự án bằng lệnh start.

C:\Users\Tutorialspoint\Desktop>cd MyReactNative
C:\Users\Tutorialspoint\Desktop\MyReactNative>npm start

Nếu mọi thứ suôn sẻ, bạn sẽ nhận được mã QR như hình dưới đây.

Theo hướng dẫn, một cách để chạy ứng dụng gốc phản ứng trên thiết bị Android của bạn là sử dụng triển lãm. Cài đặt ứng dụng khách triển lãm trong thiết bị Android của bạn và quét mã QR thu được ở trên.

Bước 6: Loại bỏ dự án

Nếu bạn muốn chạy trình giả lập android bằng android studio, hãy thoát ra khỏi dòng lệnh hiện tại bằng cách nhấn ctrl+c.

Sau đó, thực hiện chạy eject command như

npm run eject

Thao tác này sẽ nhắc bạn các tùy chọn để đẩy ra, chọn tùy chọn đầu tiên bằng cách sử dụng các mũi tên và nhấn enter.

Sau đó, bạn nên đề xuất tên của ứng dụng trên màn hình chính và tên dự án của các dự án Android studio và Xcode.

Mặc dù dự án của bạn đã được đẩy ra thành công, bạn có thể gặp lỗi như sau:

Bỏ qua lỗi này và chạy phản ứng gốc cho Android bằng lệnh sau:

react-native run-android

Tuy nhiên, trước đó bạn cần cài đặt android studio.

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

Truy cập trang web https://developer.android.com/studio/ và tải xuống studio android.

Sau khi tải xuống tập tin cài đặt của nó, hãy nhấp đúp vào nó và tiến hành cài đặt.

Bước 8: Định cấu hình Trình quản lý AVD

Để cấu hình Trình quản lý AVD, hãy nhấp vào biểu tượng tương ứng trong thanh menu.

Bước 9: Định cấu hình Trình quản lý AVD

Chọn định nghĩa thiết bị, Nexus 5X có thể được đề xuất.

Nhấn vào nút Next, bạn sẽ thấy một cửa sổ System Image. Chọnx86 Images chuyển hướng.

Sau đó, chọn Marshmallow và nhấp vào tiếp theo.

Cuối cùng, nhấp vào nút Kết thúc để kết thúc cấu hình AVD.

Sau khi định cấu hình thiết bị ảo của bạn, hãy nhấp vào nút phát bên dưới cột Hành động để khởi động trình giả lập Android của bạn.

Bước 10: Chạy android

Mở dấu nhắc lệnh, duyệt qua thư mục dự án của bạn và thực thi react-native run-android chỉ huy.

Sau đó, quá trình thực thi ứng dụng của bạn bắt đầu trong một lời nhắc khác mà bạn có thể thấy trạng thái của nó.

Trong trình giả lập Android của mình, bạn có thể thấy việc thực thi ứng dụng mặc định như sau:

Bước 11: local.properties

Mở android thư mục trong thư mục dự án của bạn SampleReactNative/android(trong trường hợp này). Tạo một tệp có tênlocal.properties và thêm đường dẫn sau vào đó.

sdk.dir = /C:\\Users\\Tutorialspoint\\AppData\\Local\\Android\\Sdk

đây, thay thế Tutorialspoint với tên người dùng của bạn.

Bước 12: Tải lại nóng

Và để xây dựng ứng dụng, hãy sửa đổi App.js và các thay đổi sẽ được cập nhật tự động trên trình giả lập Android.

Nếu không, hãy bấm vào nút giả lập android ctrl+m sau đó, chọn Enable Hot Reloading Lựa chọn.