Thiết lập môi trường phát triển

Trang này sẽ giúp bạn cài đặt và xây dựng ứng dụng React Native đầu tiên của mình.

Nếu bạn chưa quen với việc phát triển thiết bị di động , cách dễ nhất để bắt đầu là với Expo CLI. Expo là một bộ công cụ được xây dựng xung quanh React Native và mặc dù có nhiều tính năng nhưng tính năng phù hợp nhất với chúng tôi hiện tại là nó có thể giúp bạn viết một ứng dụng React Native trong vòng vài phút. Bạn sẽ chỉ cần phiên bản Node.js gần đây và điện thoại hoặc trình giả lập. Nếu bạn muốn dùng thử React Native trực tiếp trong trình duyệt web của mình trước khi cài đặt bất kỳ công cụ nào, bạn có thể dùng thử Snack .

Nếu bạn đã quen với phát triển di động , bạn có thể muốn sử dụng React Native CLI. Nó yêu cầu Xcode hoặc Android Studio để bắt đầu. Nếu bạn đã cài đặt một trong những công cụ này, bạn sẽ có thể thiết lập và chạy trong vòng vài phút. Nếu chúng chưa được cài đặt, bạn sẽ mất khoảng một giờ để cài đặt và cấu hình chúng.

Dưới đây là hướng dẫn cài đặt Expo CLI và React Native CLI cho từng hệ điều hành và ứng dụng phát triển.

Giả sử bạn đã cài đặt Node 12 LTS trở lên, bạn có thể sử dụng npm để cài đặt tiện ích dòng lệnh Expo CLI:

npm sử dụng: npm install -g expo-cli 
yarn sử dụng: yarn global add expo-cli

Sau đó, chạy các lệnh sau để tạo một dự án React Native mới có tên là “AwesomeProject”:

npm sử dụng: expo init AwesomeProjectcd AwesomeProject
    npm start 
   # Bạn cũng có thể sử dụng:
    expo start
yarn sử dụng: expo init AwesomeProjectcd AwesomeProject
      yarn start
 # Bạn cũng có thể sử dụng:
      expo start

Điều này sẽ bắt đầu một máy chủ phát triển cho bạn.

Chạy ứng dụng React Native của bạn

Cài đặt ứng dụng khách Expo trên điện thoại iOS hoặc Android của bạn và kết nối với cùng một mạng không dây với máy tính của bạn. Trên Android, sử dụng ứng dụng Expo để quét mã QR từ thiết bị đầu cuối của bạn để mở dự án của bạn. Trên iOS, sử dụng trình quét mã QR tích hợp của ứng dụng Máy ảnh.

Sửa đổi ứng dụng của bạn

Bây giờ bạn đã chạy ứng dụng thành công, hãy sửa đổi nó. Mở App.jstrong trình soạn thảo văn bản mà bạn chọn và chỉnh sửa một số dòng. Ứng dụng sẽ tự động tải lại sau khi bạn lưu các thay đổi của mình.

Đó là nó!

Xin chúc mừng! Bạn đã chạy và sửa đổi thành công ứng dụng React Native đầu tiên của mình.

 

Trên Windows hiện tại chỉ mới phát triển được android chưa hỗ trợ ios.

Cài đặt phụ thuộc

Bạn sẽ cần Node, giao diện dòng lệnh React Native, JDK và Android Studio.

Mặc dù bạn có thể sử dụng bất kỳ trình chỉnh sửa nào bạn chọn để phát triển ứng dụng của mình, nhưng bạn sẽ cần cài đặt Android Studio để thiết lập công cụ cần thiết để xây dựng ứng dụng React Native dành cho Android.

Node, JDK

Chúng tôi khuyên bạn nên cài đặt Node qua Chocolatey , một trình quản lý gói phổ biến dành cho Windows.

React Native cũng yêu cầu Java SE Development Kit (JDK) , có thể được cài đặt bằng Chocolatey.

Mở Dấu nhắc lệnh của Quản trị viên (nhấp chuột phải vào Dấu nhắc Lệnh và chọn “Chạy với tư cách Quản trị viên”), sau đó chạy lệnh sau:

choco install -y nodejs.install openjdk8

Nếu bạn đã cài đặt Node trên hệ thống của mình, hãy đảm bảo rằng nó là Node 10 hoặc mới hơn. Nếu bạn đã có JDK trên hệ thống của mình, hãy đảm bảo rằng nó là phiên bản 8 hoặc mới hơn.

Bạn có thể tìm thấy các tùy chọn cài đặt bổ sung trên trang Tải xuống của Node .

Nếu bạn đang sử dụng phiên bản mới nhất của Bộ công cụ phát triển Java, bạn sẽ cần thay đổi phiên bản Gradle của dự án của mình để nó có thể nhận ra JDK. Bạn có thể làm điều đó bằng cách truy cập {project root folder}\android\gradle\wrapper\gradle-wrapper.propertiesvà thay đổi distributionUrlgiá trị để nâng cấp phiên bản Gradle. Bạn có thể xem tại đây các bản phát hành mới nhất của Gradle .

Môi trường phát triển Android

Việc thiết lập môi trường phát triển của bạn có thể hơi tẻ nhạt nếu bạn mới bắt đầu phát triển Android. Nếu bạn đã quen với việc phát triển Android, có một số thứ bạn có thể cần phải định cấu hình. Trong cả hai trường hợp, hãy đảm bảo thực hiện cẩn thận các bước tiếp theo.

1. Cài đặt Android Studio

Tải xuống và cài đặt Android Studio . Trong khi sử dụng trình hướng dẫn sử dụng Android Studio, hãy đảm bảo rằng các hộp bên cạnh tất cả các mục sau được chọn:

Sau đó, nhấp vào “Tiếp theo” để cài đặt tất cả các thành phần này.

Nếu các hộp kiểm chuyển sang màu xám, bạn sẽ có cơ hội cài đặt các thành phần này sau này.

Khi quá trình thiết lập đã hoàn tất và bạn sẽ thấy màn hình Chào mừng, hãy chuyển sang bước tiếp theo.

2. Cài đặt 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 với mã gốc Android 10 (Q)đặc biệt yêu cầu SDK. SDK Android bổ sung có thể được cài đặt thông qua Trình quản lý SDK trong Android Studio.

Để làm điều đó, hãy mở Android Studio, click on “Configure” button and select “SDK Manager”.

Chào mừng bạn đến với Android Studio

Trình quản lý SDK cũng có thể được tìm thấy trong hộp thoại “Preferences” của Android Studio, trong Appearance & Behavior → System Settings → Android SDK.

Chọn tab “SDK Platforms” từ bên trong SDK Manager, 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 Android 10 (Q)mục nhập, sau đó đảm bảo rằng các mục sau được chọn:

  • Android SDK Platform 29
  • Intel x86 Atom_64 System Image hoặc là Google APIs Intel x86 Atom System Image

Tiếp theo, chọn tab “SDK Tools” và chọn hộp bên cạnh “Show Package Details” tại đây. Tìm kiếm và mở rộng mục nhập “Android SDK Build-Tools”, sau đó đảm bảo rằng mục đó 29.0.2đã đượ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ụ xây dựng liên quan.

3. Định cấu hình biến môi trường ANDROID_HOME

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 để tạo ứng dụng với mã gốc.

  1. Mở Windows Control Panel.
  2. Nhấp chuột vào User Accounts, sau đó nhấp vào User Accounts lại
  3. Nhấp vào Change my environment variables
  4. Nhấp vào New để tạo ANDROID_HOMEbiến người dùng mới trỏ đến đường dẫn đến Android SDK của bạn:

Biến môi trường ANDROID_HOME

SDK được cài đặt, theo mặc định, tại vị trí sau:

%LOCALAPPDATA%\Android\Sdk

Bạn có thể tìm thấy vị trí thực của SDK trong hộp thoại “Settings” của Android Studio, trong Appearance & Behavior → System Settings → Android SDK .

Mở cửa sổ Dấu nhắc lệnh mới để đảm bảo biến môi trường mới được tải trước khi tiếp tục bước tiếp theo.

  1. Mở powershell
  2. Sao chép và dán Get-ChildItem -Path Env:\ vào powershell
  3. Xác minh ANDROID_HOMEđã được thêm vào

4. Thêm platform-tools vào Path

  1. Mở Windows Control Panel.
  2. Nhấp chuột vào User Accounts, sau đó nhấp vào User Accounts lại
  3. Nhấp vào Change my environment variables
  4. Chọn biến Path
  5. Nhấp vào Edit
  6. Nhấp vào New và thêm đường dẫn đến công cụ nền tảng vào danh sách.

Vị trí mặc định cho thư mục này là:

%LOCALAPPDATA%\Android\Sdk\platform-tools

Giao diện dòng lệnh React Native

React Native có một giao diện dòng lệnh được tích hợp sẵn. Thay vì cài đặt và quản lý một phiên bản cụ thể của CLI trên toàn cầu, chúng tôi khuyên bạn nên truy cập vào phiên bản hiện tại trong thời gian chạy bằng cách sử dụng phiên bản npxnày đi kèm với Node.js. Với npx react-native <command>, phiên bản ổn định hiện tại của CLI sẽ được tải xuống và thực thi tại thời điểm chạy lệnh.

Tạo một ứng dụng mới

Nếu trước đó bạn đã cài đặt react-native-cligói toàn cầu , vui lòng xóa gói này vì nó có thể gây ra sự cố không mong muốn.

React Native có một giao diện dòng lệnh tích hợp, bạn có thể sử dụng giao diện này để tạo một dự án mới. Bạn có thể truy cập nó mà không cần cài đặt bất kỳ thứ gì trên toàn cầu bằng cách sử dụng npxNode.js. Hãy tạo một dự án React Native mới có tên là “AwesomeProject”:

npx react-native init AwesomeProject

Điều này là không cần thiết nếu bạn đang tích hợp React Native vào một ứng dụng hiện có, nếu bạn “loại bỏ” khỏi Expo hoặc nếu bạn đang thêm hỗ trợ Android vào một dự án React Native hiện có (xem Mã nền tảng cụ thể ). Bạn cũng có thể sử dụng CLI của bên thứ ba để khởi động ứng dụng React Native của mình, chẳng hạn như Ignite CLI .

[Tùy chọn] Sử dụng phiên bản hoặc mẫu cụ thể

Nếu bạn muốn bắt đầu một dự án mới với một phiên bản React Native cụ thể, bạn có thể sử dụng --versionđối số:

npx react-native init AwesomeProject --version X.XX.X

Bạn cũng có thể bắt đầu một dự án với mẫu React Native tùy chỉnh, như TypeScript, với --templateđối số:

npx react-native init AwesomeTSProject --template react-native-template-typescript

Chuẩn bị thiết bị Android

Bạn sẽ cần một thiết bị Android để chạy ứng dụng React Native Android của mình. Đây có thể là thiết bị Android thực hoặc thông thường hơn, bạn có thể sử dụng Thiết bị ảo Android cho phép bạn giả lập thiết bị Android trên máy tính của mình.

Dù bằng cách nào, bạn sẽ cần chuẩn bị thiết bị để chạy các ứng dụng Android để phát triển.

Sử dụng thiết bị vật lý

Nếu bạn có thiết bị Android vật lý, bạn có thể sử dụng thiết bị này để phát triển thay cho AVD bằng cách cắm thiết bị đó vào máy tính bằng cáp USB và làm theo hướng dẫn tại đây .

Sử dụng thiết bị ảo

Nếu bạn sử dụng Android Studio để mở ./AwesomeProject/android, bạn có thể xem danh sách các Thiết bị ảo Android (AVD) hiện có bằng cách mở “AVD Manager” từ bên trong Android Studio. Tìm biểu tượng giống như sau:

Trình quản lý AVD của Android Studio

Nếu gần đây bạn đã cài đặt Android Studio, có thể bạn sẽ cần tạo AVD mới . Chọn “Create Virtual Device…”, sau đó chọn bất kỳ Điện thoại nào từ danh sách và nhấp vào “Next”, sau đó chọn hình ảnh Q API Cấp 29.

Nếu bạn chưa cài đặt HAXM, hãy nhấp vào “Cài đặt HAXM” hoặc làm theo các hướng dẫn sau để thiết lập, sau đó quay lại Trình quản lý AVD.

Nhấp vào “Next” rồi “Finish” để tạo AVD của bạn. Tại thời điểm này, bạn có thể nhấp vào nút hình tam giác màu xanh lá cây bên cạnh AVD của bạn để khởi chạy nó, sau đó tiến hành bước tiếp theo.

Chạy ứng dụng React Native của bạn

Bước 1: Bắt đầu Metro

Đầu tiên, bạn sẽ cần khởi động Metro, trình gói JavaScript đi kèm với React Native. Metro “nhận một tệp mục nhập và các tùy chọn khác nhau và trả về một tệp JavaScript duy nhất bao gồm tất cả mã của bạn và các phần phụ thuộc của nó.” – Metro Docs

Để bắt đầu Metro, hãy chạy npx react-native startbên trong thư mục dự án React Native của bạn:

npx react-native start

react-native start khởi động Metro Bundler.

Nếu bạn sử dụng trình quản lý gói Yarn, bạn có thể sử dụng yarnthay vì npxkhi chạy các lệnh React Native bên trong một dự án hiện có.

Nếu bạn đã quen với việc phát triển web, Metro rất giống webpack — dành cho các ứng dụng React Native. Không giống như Kotlin hay Java, JavaScript không được biên dịch — và React Native cũng vậy. Gói không giống như biên dịch, nhưng nó có thể giúp cải thiện hiệu suất khởi động và dịch một số JavaScript dành riêng cho nền tảng thành nhiều JavaScript hơn.

Bước 2: Khởi động ứng dụng của bạn

Hãy để Metro Bundler chạy trong nhà ga của chính nó. Mở một thiết bị đầu cuối mới bên trong thư mục dự án React Native của bạn. Chạy như sau:

npx react-native run-android

Nếu mọi thứ được thiết lập chính xác, bạn sẽ sớm thấy ứng dụng mới của mình chạy trong trình giả lập Android.

AwesomeProject trên Android

npx react-native run-android là một cách để chạy ứng dụng của bạn – bạn cũng có thể chạy ứng dụng trực tiếp từ bên trong Android Studio.

Nếu bạn không thể làm việc này, hãy xem trang Khắc phục sự cố .

Sửa đổi ứng dụng của bạn

Bây giờ bạn đã chạy ứng dụng thành công, hãy sửa đổi nó.

  • Mở App.jstrong trình soạn thảo văn bản mà bạn chọn và chỉnh sửa một số dòng.
  • Nhấn Rphím hai lần hoặc chọn Reloadtừ Menu nhà phát triển ( Ctrl + M) để xem các thay đổi của bạn!

Đó là nó!

Xin chúc mừng! Bạn đã chạy và sửa đổi thành công ứng dụng React Native đầu tiên của mình.

Cài đặt phụ thuộc

Bạn sẽ cần Node, Watchman, giao diện dòng lệnh React Native, JDK và Android Studio.

Mặc dù bạn có thể sử dụng bất kỳ trình chỉnh sửa nào bạn chọn để phát triển ứng dụng của mình, nhưng bạn sẽ cần cài đặt Android Studio để thiết lập công cụ cần thiết để xây dựng ứng dụng React Native dành cho Android.

Node & Watchman

Chúng tôi khuyên bạn nên cài đặt Node và Watchman bằng Homebrew . Chạy các lệnh sau trong Terminal sau khi cài đặt Homebrew:

brew install node brew install watchman

Nếu bạn đã cài đặt Node trên hệ thống của mình, hãy đảm bảo rằng đó là Node 10 hoặc mới hơn.

Watchman là một công cụ của Facebook để theo dõi các thay đổi trong hệ thống tập tin. Bạn nên cài đặt nó để có hiệu suất tốt hơn.

Java Development Kit

Chúng tôi khuyên bạn nên cài đặt JDK bằng Homebrew . Chạy các lệnh sau trong Terminal sau khi cài đặt Homebrew:

brew cask install adoptopenjdk/openjdk/adoptopenjdk8

Nếu bạn đã cài đặt JDK trên hệ thống của mình, hãy đảm bảo rằng nó là JDK 8 hoặc mới hơn.

Môi trường phát triển Android

Việc thiết lập môi trường phát triển của bạn có thể hơi tẻ nhạt nếu bạn mới bắt đầu phát triển Android. Nếu bạn đã quen với việc phát triển Android, có một số thứ bạn có thể cần phải định cấu hình. Trong cả hai trường hợp, hãy đảm bảo thực hiện cẩn thận các bước tiếp theo.

1. Cài đặt Android Studio

Tải xuống và cài đặt Android Studio . Trong khi sử dụng trình hướng dẫn sử dụng Android Studio, hãy đảm bảo rằng các hộp bên cạnh tất cả các mục sau được chọn:

Sau đó, nhấp vào “Tiếp theo” để cài đặt tất cả các thành phần này.

Nếu các hộp kiểm chuyển sang màu xám, bạn sẽ có cơ hội cài đặt các thành phần này sau này.

Khi quá trình thiết lập đã hoàn tất và bạn sẽ thấy màn hình Chào mừng, hãy chuyển sang bước tiếp theo.

2. Cài đặt 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 với mã gốc Android 10 (Q)đặc biệt yêu cầu SDK. SDK Android bổ sung có thể được cài đặt thông qua Trình quản lý SDK trong Android Studio.

Để làm điều đó, hãy mở Android Studio, nhấp vào nút “Configure” và chọn “SDK Manager”.

Chào mừng bạn đến với Android Studio

Trình quản lý SDK cũng có thể được tìm thấy trong hộp thoại “Tùy chọn” của Android Studio, trong Appearance & Behavior → System Settings → Android SDK.

Chọn tab “SDK Platforms” từ bên trong Trình quản lý 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 Android 10 (Q)mục nhập, sau đó đảm bảo rằng các mục sau được chọn:

  • Android SDK Platform 29
  • Intel x86 Atom_64 System Image hoặc là Google APIs Intel x86 Atom System Image

Tiếp theo, chọn tab “SDK Tools” và chọn hộp bên cạnh “Show Package Details” tại đây. Tìm kiếm và mở rộng mục nhập “Android SDK Build-Tools”, sau đó đảm bảo rằng mục đó 29.0.2đã đượ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ụ xây dựng liên quan.

3. Định cấu hình biến môi trường ANDROID_HOME

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 để tạo ứng dụng với mã gốc.

Thêm các dòng sau vào tệp cấu hình $HOME/.bash_profilehoặc $HOME/.bashrc(nếu bạn đang sử dụng zshthì ~/.zprofilehoặc ~/.zshrc):

export ANDROID_HOME=$HOME/Library/Android/sdk 
export PATH=$PATH:$ANDROID_HOME/emulator 
export PATH=$PATH:$ANDROID_HOME/tools 
export PATH=$PATH:$ANDROID_HOME/tools/bin 
export PATH=$PATH:$ANDROID_HOME/platform-tools

.bash_profilelà cụ thể cho bash. Nếu bạn đang sử dụng một trình bao khác, bạn sẽ cần chỉnh sửa tệp cấu hình dành riêng cho trình bao phù hợp.

Nhập source $HOME/.bash_profilecho bashhoặc source $HOME/.zprofileđể tải cấu hình vào trình bao hiện tại của bạn. Xác minh rằng ANDROID_HOME đã được thiết lập bằng cách chạy echo $ANDROID_HOMEvà các thư mục thích hợp đã được thêm vào đường dẫn của bạn bằng cách chạy echo $PATH.

Hãy đảm bảo rằng bạn sử dụng đúng đường dẫn SDK Android. Bạn có thể tìm thấy vị trí thực của SDK trong hộp thoại “Preferences” của Android Studio, trong Appearance & Behavior → System Settings → Android SDK.

Giao diện dòng lệnh React Native

React Native có một giao diện dòng lệnh được tích hợp sẵn. Thay vì cài đặt và quản lý một phiên bản cụ thể của CLI trên toàn cầu, chúng tôi khuyên bạn nên truy cập vào phiên bản hiện tại trong thời gian chạy bằng cách sử dụng phiên bản npxnày đi kèm với Node.js. Với npx react-native <command>, phiên bản ổn định hiện tại của CLI sẽ được tải xuống và thực thi tại thời điểm chạy lệnh.

Tạo một ứng dụng mới

Nếu trước đó bạn đã cài đặt react-native-cligói toàn cầu , vui lòng xóa gói này vì nó có thể gây ra sự cố không mong muốn.

React Native có một giao diện dòng lệnh tích hợp, bạn có thể sử dụng giao diện này để tạo một dự án mới. Bạn có thể truy cập nó mà không cần cài đặt bất kỳ thứ gì trên toàn cầu bằng cách sử dụng npxNode.js. Hãy tạo một dự án React Native mới có tên là “AwesomeProject”:

npx react-native init AwesomeProject

Điều này là không cần thiết nếu bạn đang tích hợp React Native vào một ứng dụng hiện có, nếu bạn “loại bỏ” khỏi Expo hoặc nếu bạn đang thêm hỗ trợ Android vào một dự án React Native hiện có (xem Mã nền tảng cụ thể ). Bạn cũng có thể sử dụng CLI của bên thứ ba để khởi động ứng dụng React Native của mình, chẳng hạn như Ignite CLI .

[Tùy chọn] Sử dụng phiên bản hoặc mẫu cụ thể

Nếu bạn muốn bắt đầu một dự án mới với một phiên bản React Native cụ thể, bạn có thể sử dụng --versionđối số:

npx react-native init AwesomeProject --version X.XX.X

Bạn cũng có thể bắt đầu một dự án với mẫu React Native tùy chỉnh, như TypeScript, với --templateđối số:

npx react-native init AwesomeTSProject --template react-native-template-typescript

Chuẩn bị thiết bị Android

Bạn sẽ cần một thiết bị Android để chạy ứng dụng React Native Android của mình. Đây có thể là thiết bị Android thực hoặc thông thường hơn, bạn có thể sử dụng Thiết bị ảo Android cho phép bạn giả lập thiết bị Android trên máy tính của mình.

Dù bằng cách nào, bạn sẽ cần chuẩn bị thiết bị để chạy các ứng dụng Android để phát triển.

Sử dụng thiết bị vật lý

Nếu bạn có thiết bị Android vật lý, bạn có thể sử dụng thiết bị này để phát triển thay cho AVD bằng cách cắm thiết bị đó vào máy tính bằng cáp USB và làm theo hướng dẫn tại đây .

Sử dụng thiết bị ảo

Nếu bạn sử dụng Android Studio để mở ./AwesomeProject/android, bạn có thể xem danh sách các Thiết bị ảo Android (AVD) hiện có bằng cách mở “Trình quản lý AVD” từ bên trong Android Studio. Tìm biểu tượng giống như sau:

Trình quản lý AVD của Android Studio

Nếu gần đây bạn đã cài đặt Android Studio, có thể bạn sẽ cần tạo AVD mới . Chọn “Tạo thiết bị ảo …”, sau đó chọn bất kỳ Điện thoại nào từ danh sách và nhấp vào “Tiếp theo”, sau đó chọn hình ảnh Q API Cấp 29.

Nếu bạn chưa cài đặt HAXM, hãy làm theo các hướng dẫn sau để thiết lập nó, sau đó quay lại Trình quản lý AVD.

Nhấp vào “Tiếp theo” rồi “Hoàn tất” để tạo AVD của bạn. Tại thời điểm này, bạn có thể nhấp vào nút hình tam giác màu xanh lá cây bên cạnh AVD của bạn để khởi chạy nó, sau đó tiến hành bước tiếp theo.

Chạy ứng dụng React Native của bạn

Bước 1: Bắt đầu Metro

Đầu tiên, bạn sẽ cần khởi động Metro, trình gói JavaScript đi kèm với React Native. Metro “nhận một tệp mục nhập và các tùy chọn khác nhau và trả về một tệp JavaScript duy nhất bao gồm tất cả mã của bạn và các phần phụ thuộc của nó.” – Metro Docs

Để bắt đầu Metro, hãy chạy npx react-native startbên trong thư mục dự án React Native của bạn:

npx react-native start

react-native start khởi động Metro Bundler.

Nếu bạn sử dụng trình quản lý gói Yarn, bạn có thể sử dụng yarnthay vì npxkhi chạy các lệnh React Native bên trong một dự án hiện có.

Nếu bạn đã quen với việc phát triển web, Metro rất giống webpack — dành cho các ứng dụng React Native. Không giống như Kotlin hay Java, JavaScript không được biên dịch — và React Native cũng vậy. Gói không giống như biên dịch, nhưng nó có thể giúp cải thiện hiệu suất khởi động và dịch một số JavaScript dành riêng cho nền tảng thành nhiều JavaScript hơn.

Bước 2: Khởi động ứng dụng của bạn

Hãy để Metro Bundler chạy trong nhà ga của chính nó. Mở một thiết bị đầu cuối mới bên trong thư mục dự án React Native của bạn. Chạy như sau:

npx react-native run-android

Nếu mọi thứ được thiết lập chính xác, bạn sẽ sớm thấy ứng dụng mới của mình chạy trong trình giả lập Android.

AwesomeProject trên Android

npx react-native run-android là một cách để chạy ứng dụng của bạn – bạn cũng có thể chạy ứng dụng trực tiếp từ bên trong Android Studio.

Nếu bạn không thể làm việc này, hãy xem trang Khắc phục sự cố .

Sửa đổi ứng dụng của bạn

Bây giờ bạn đã chạy ứng dụng thành công, hãy sửa đổi nó.

  • Mở App.jstrong trình soạn thảo văn bản mà bạn chọn và chỉnh sửa một số dòng.
  • Nhấn Rphím hai lần hoặc chọn Reloadtừ Menu nhà phát triển ( ⌘M) để xem các thay đổi của bạn!

Đó là nó!

Xin chúc mừng! Bạn đã chạy và sửa đổi thành công ứng dụng React Native đầu tiên của mình.

Cài đặt phụ thuộc

Bạn sẽ cần Node, Watchman, giao diện dòng lệnh React Native và Xcode.

Mặc dù bạn có thể sử dụng bất kỳ trình chỉnh sửa nào bạn chọn để phát triển ứng dụng của mình, nhưng bạn sẽ cần cài đặt Xcode để thiết lập công cụ cần thiết để xây dựng ứng dụng React Native dành cho iOS.

Node & Watchman

Chúng tôi khuyên bạn nên cài đặt Node và Watchman bằng Homebrew . Chạy các lệnh sau trong Terminal sau khi cài đặt Homebrew:

brew install node
brew install watchman

Nếu bạn đã cài đặt Node trên hệ thống của mình, hãy đảm bảo rằng đó là Node 10 hoặc mới hơn.

Watchman là một công cụ của Facebook để theo dõi các thay đổi trong hệ thống tập tin. Bạn nên cài đặt nó để có hiệu suất tốt hơn.

Xcode & CocoaPods

Cách dễ nhất để cài đặt Xcode là thông qua Mac App Store . Cài đặt Xcode cũng sẽ cài đặt Trình mô phỏng iOS và tất cả các công cụ cần thiết để xây dựng ứng dụng iOS của bạn.

Nếu bạn đã cài đặt Xcode trên hệ thống của mình, hãy đảm bảo rằng nó là phiên bản 9.4 hoặc mới hơn.

Công cụ dòng lệnh

Bạn cũng sẽ cần cài đặt Công cụ dòng lệnh Xcode. Mở Xcode, sau đó chọn “Preferences …” từ menu Xcode. Đi tới bảng điều khiển Vị trí và cài đặt các công cụ bằng cách chọn phiên bản mới nhất trong trình đơn Command Line Tools dropdown.

Công cụ dòng lệnh Xcode

Cài đặt Trình mô phỏng iOS trong Xcode

Để cài đặt trình mô phỏng, hãy mở Xcode> Preferences … và chọn Components  tab. Chọn một trình mô phỏng với phiên bản iOS tương ứng mà bạn muốn sử dụng.

CocoaPods

CocoaPods được xây dựng bằng Ruby và nó sẽ có thể cài đặt được bằng Ruby mặc định có sẵn trên macOS. Bạn có thể sử dụng trình quản lý Phiên bản Ruby, tuy nhiên, chúng tôi khuyên bạn nên sử dụng Ruby tiêu chuẩn có sẵn trên macOS trừ khi bạn biết mình đang làm gì.

Việc sử dụng cài đặt Ruby mặc định sẽ yêu cầu bạn sử dụng sudokhi cài đặt đá quý. (Tuy nhiên, đây chỉ là một vấn đề trong thời gian cài đặt đá quý.)

sudo gem install cocoapods

Để biết thêm thông tin, vui lòng truy cập hướng dẫn Bắt đầu CocoaPods .

Giao diện dòng lệnh React Native

React Native có một giao diện dòng lệnh được tích hợp sẵn. Thay vì cài đặt và quản lý một phiên bản cụ thể của CLI trên toàn cầu, chúng tôi khuyên bạn nên truy cập vào phiên bản hiện tại trong thời gian chạy bằng cách sử dụng phiên bản npxnày đi kèm với Node.js. Với npx react-native <command>, phiên bản ổn định hiện tại của CLI sẽ được tải xuống và thực thi tại thời điểm chạy lệnh.

Tạo ứng dụng mới

Nếu trước đó bạn đã cài đặt react-native-cligói toàn cầu , vui lòng xóa gói này vì nó có thể gây ra sự cố không mong muốn.

Bạn có thể sử dụng giao diện dòng lệnh tích hợp của React Native để tạo một dự án mới. Hãy tạo một dự án React Native mới có tên là “AwesomeProject”:

npx react-native init AwesomeProject

Điều này là không cần thiết nếu bạn đang tích hợp React Native vào một ứng dụng hiện có, nếu bạn “loại bỏ” khỏi Expo hoặc nếu bạn đang thêm hỗ trợ iOS vào một dự án React Native hiện có (xem Mã nền tảng cụ thể ). Bạn cũng có thể sử dụng CLI của bên thứ ba để khởi động ứng dụng React Native của mình, chẳng hạn như Ignite CLI .

[Tùy chọn] Sử dụng một phiên bản hoặc mẫu cụ thể

Nếu bạn muốn bắt đầu một dự án mới với một phiên bản React Native cụ thể, bạn có thể sử dụng --versionđối số:

npx react-native init AwesomeProject --version X.XX.X

Bạn cũng có thể bắt đầu một dự án với mẫu React Native tùy chỉnh, như TypeScript, với --templateđối số:

npx react-native init AwesomeTSProject --template react-native-template-typescript

Lưu ý Nếu lệnh trên không thành công, bạn có thể đã cài đặt phiên bản cũ react-nativehoặc react-native-cliđã được cài đặt toàn cầu trên máy tính của mình. Thử gỡ cài đặt cli và chạy cli bằng cách sử dụng npx.

Chạy ứng dụng React Native

Bước 1: Bắt đầu Metro

Đầu tiên, bạn sẽ cần khởi động Metro, trình gói JavaScript đi kèm với React Native. Metro “nhận một tệp mục nhập và các tùy chọn khác nhau và trả về một tệp JavaScript duy nhất bao gồm tất cả mã của bạn và các phần phụ thuộc của nó.” – Metro Docs

Để bắt đầu Metro, hãy chạy npx react-native startbên trong thư mục dự án React Native của bạn:

npx react-native start

react-native start khởi động Metro Bundler.

Nếu bạn sử dụng trình quản lý gói Yarn, bạn có thể sử dụng yarnthay vì npxkhi chạy các lệnh React Native bên trong một dự án hiện có.

Nếu bạn đã quen với việc phát triển web, Metro rất giống webpack — dành cho các ứng dụng React Native. Không giống như Kotlin hay Java, JavaScript không được biên dịch — và React Native cũng vậy. Gói không giống như biên dịch, nhưng nó có thể giúp cải thiện hiệu suất khởi động và dịch một số JavaScript dành riêng cho nền tảng thành nhiều JavaScript hơn.

Bước 2: Khởi động ứng dụng của bạn

Hãy để Metro Bundler chạy trong nhà ga của chính nó. Mở một thiết bị đầu cuối mới bên trong thư mục dự án React Native của bạn. Chạy như sau:

npx react-native run-ios

Bạn sẽ sớm thấy ứng dụng mới của mình chạy trong Trình mô phỏng iOS.

AwesomeProject trên iOS

npx react-native run-ioslà một cách để chạy ứng dụng của bạn. Bạn cũng có thể chạy nó trực tiếp từ bên trong Xcode.

Nếu bạn không thể làm việc này, hãy xem trang Khắc phục sự cố .

Đang chạy trên một thiết bị

Lệnh trên sẽ tự động chạy ứng dụng của bạn trên Trình mô phỏng iOS theo mặc định. Nếu bạn muốn chạy ứng dụng trên thiết bị iOS thực, vui lòng làm theo hướng dẫn tại đây .

Đang sửa đổi ứng dụng của bạn

Bây giờ bạn đã chạy ứng dụng thành công, hãy sửa đổi nó.

  • Mở App.jstrong trình soạn thảo văn bản mà bạn chọn và chỉnh sửa một số dòng.
  • Nhấn ⌘Rvào Trình mô phỏng iOS của bạn để tải lại ứng dụng và xem các thay đổi của bạn!

Đó là nó!

Xin chúc mừng! Bạn đã chạy và sửa đổi thành công ứng dụng React Native đầu tiên của mình.

Tham khảo tại reactnative.dev

baladken.com

Xin chào

Hi mn mình là baladken đây. Hiện tại mình là một “Nhặt trình viên” à nhầm là một “Lập trình viên” chân chính.

About Baladken

FullName: Nguyễn Minh Phương

DOB: 1999

Born: Lập Thạch – Vĩnh phúc

Phone: 0334924xxx
Email: phuongnmd00539@fpt.edu.vn