Cài đặt react native windows

Run the following command to create a new React Native project called "AwesomeProject":

• npm
• Yarn

npx create-expo-app AwesomeProject

cd AwesomeProject
npm start # you can also use: npx expo start

This will start a development server for you.

Running your React Native application

Install the Expo Go app on your iOS or Android phone and connect to the same wireless network as your computer. On Android, use the Expo Go app to scan the QR code from your terminal to open your project. On iOS, use the built-in QR code scanner of the default iOS Camera app.

Modifying your app

Now that you have successfully run the app, let's modify it. Open App.js in your text editor of choice and edit some lines. The application should reload automatically once you save your changes.

That's it!

Congratulations! You've successfully run and modified your first React Native app.

Now what?

Expo also has docs you can reference if you have questions specific to the tool. You can also ask for help on the Expo Discord.

If you have a problem with Expo, before creating a new issue, please see if there's an existing issue about it in the Expo issues.

If you're curious to learn more about React Native, check out the Introduction to React Native.

Running your app on a simulator or virtual device

Expo Go allows you to run your React Native app on a physical device without installing iOS and Android native SDKs. If you want to run your app on the iOS Simulator or an Android Virtual Device, please refer to the instructions for "React Native CLI Quickstart" to learn how to install Xcode or set up your Android development environment.

Once you've set these up, you can launch your app on an Android Virtual Device by running npm run android, or on the iOS Simulator by running npm run ios (macOS only).

Caveats

The Expo Go app is a great tool to get started — it exists to help developers quickly get projects off the ground, to experiment with ideas (such as on Snack) and share their work with minimal friction. Expo Go makes this possible by including a feature-rich native runtime made up of every module in the Expo SDK, so all you need to do to use a module is install the package with npx expo install and reload your app.

The tradeoff is that the Expo Go app does not allow you to add custom native code — you can only use native modules built into the Expo SDK. There are many great libraries available outside of the Expo SDK, and you may even want to build your own native library. You can leverage these libraries with development builds, or by using "prebuild" to generate the native projects, or both. Learn more about adding native code to projects created with create-expo-app.

create-expo-app configures your project to use the most recent React Native version that is supported by the Expo SDK. The Expo Go app usually gains support for a given React Native version with new SDK versions (released quarterly). You can check this document to find out what versions are supported.

If you're integrating React Native into an existing project, you can use the Expo SDK and development builds, but you will need to set up a native development environment. Select "React Native CLI Quickstart" above for instructions on configuring a native build environment for React Native.

Cài đặt React Native trên môi trường Windows

A. Những thành phần cần thiết

Bạn cần phải có :

1. Node
2. Python2
3. JDK
4. Android Studio

React Native khuyên cài Node, Java SE Development Kit (JDK) và Python2 thông qua Chocolatey, đây là ứng dụng phổ biến cho Windows

Câu lệnh cài đặt trên Chocolatey như sau ( chạy CMD với quyền "Run as Administrator"): choco install -y nodejs.install python2 jdk8

B. The React Native CLI (CLI-command line interface)

Chạy lệnh CMD sau để cài đặt React Native CLI: npm install -g react-native-cli

C. Cài đặt môi trường Android

1. Cài Android Studio

Tải Android Studio tại đây. Cài đặt và chọn các mục:

• Android SDK
• Android SDK Paltform
• Performance (Intel ® HAXM) -- cho máy ảo
• Android Virtual Device -- cho máy ảo 2 lựa chọn cuối dành cho máy ảo Android. Nếu bạn đã có thiết bị Android rồi thì không cần cài cũng được

Hoặc chỉ cài android SDK tại:

https://developer.android.com/studio/index.html#command-tools

2. Cài đặt Android SDK

Mặc định Android Studio sẽ cài Android SDK mới nhất nhưng trên trang chủ React Native ưu tiên sử dụng Android 6.0 (Marshmallow) SDK

Cấu hình cài đặt Android SDK ở màn "Welcome to Android Studio" chọn "Configure" và sau đó ấn "SDK Manager"

Nếu bạn đang mở Project nào đó thì ấn "Tools" sau đó "SDK Manager"

Tìm đến Android 6.0 (Marshmallow) chọn các mục dưới đây để tải về:

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

Tiếp, chọn tab "SDK Tools" ấn "Show Package Details", vào "Android SDK Build-Tools" chọn bản 23.0.1

Chọn "Apply" để bắt đầu tải và cài đặt Android SDK và Build Tools

3. Cấu hình ANDROID_HOME cho Windows

Để React Native build app bạn phải chỉ định chỗ bạn cài Android Sdk ở đâu. Bạn làm theo hướng dẫn sau

Thường thì SDK sẽ được cài ở

C:\Users\%USERNAME%\AppData\Local\Android\sdk

D. Tạo project

Bạn mở CMD và gõ lệnh sau

react-native init Dgn

Trong đó Dgn là tên project được tạo ra

I. Sử dụng thiết bị thật

Việc đầu tiên phải kiểm tra là thiết bị Android của bạn Wifi hoạt động tốt vì sắp tới bạn sẽ dùng chủ yếu bằng Wifi

Thứ 2, chọn dây cáp Android thật tốt rồi cắm Android vào máy tính

1. Bật USB debugging

Đầu tiên, thiết bị Android của bạn phải ở chế độ "Developer option". Bạn Vào Settings → About phone và click Build number 7 lần.

Sau đó, vào Settings → Developer options và chọn "USB debugging"

2. Kiểm tra connect với Android

Di chuyển vào thư mục SDK

C:\Users\%USERNAME%\AppData\Local\Android\sdk\platform-tools

Sau đó gõ lệnh adb devices

>>adb devices
List of devices attached
emulator-5554 offline   # Google emulator
14ed2fcc device         # Physical device

Hiện dòng tương tự như thế này thì bạn đã thành công 14ed2fcc device

3. Run app

Gõ lệnh sau trên CMD để cài và chạy app react-native run-android

Nếu bạn chạy xong lệnh này mà hiện lỗi sau

Hiện lỗi đến đây thì bạn đang làm đúng hướng dẫn rồi đấy 

4. Kết nối với development server

Đến bước này phải chắc chắn là

• USB debugging đã bật
• Android đã connect với PC
• Android và PC cùng chung 1 mạng nhé

a) Cách 1: Dùng adb reverse

Cách này dùng cho Android 5.0 (Lollipop) trở lên Chạy lệnh trên CMD như sau:

adb reverse tcp:8081 tcp:8081

Sau đó bạn lắc Android để hiện Developer menu như dưới đây 

• Debug JS Remotely: Tùy chọn này cho phép bạn debug ứng dụng react native trong trình duyệt Google Chrome.
• Enable Live Reload: Tùy chọn này cho phép bạn xem lại các thay đổi trên Emulator/Physical Android Device ngay lập tức khi bạn lưu các thay đổi trong mã nguồn của mình. Ứng dụng của bạn sẽ load lại từ màn hình đầu tiên
• Enable Hot Reloading: Tùy chọn này cũng cho phép bạn xem lại các thay đổi ngay lập tức trên Emulator/Physical Android Device nhưng sẽ không load lại từ đầu mà sẽ hiển thị ở màn hình mà bạn đang thay đổi code

Lắc máy để hiển thị Menu này

Debug qua ứng dụng Nox

Chờ cho cho đến khi nó chạy xong, các bạn thể thấy lỗi app-debug ở phần cuối cùng khi kết thúc. Tuy nhiên đừng lo đấy là do nó phát hiện ra thiết bị để cài đặt app-debug thôi.

Tiếp theo là tải về và cài đặt Nox. Sau khi cài đặt xong, các bạn mở Nox lên, chúng ta tiến hành cài đặt hệ thống cho nó một chút. Các bạn click vào biểu tượng settings phía góc phải trên màn hình Nox. Sau khi click vào bạn sẽ thấy màn hình như vầy hiện ra:

Các bạn chuyển sang tab cài đặt cao cấp. Phần “Cài đặt tính năng” các bạn chọn thấp cho mình nhé. Vì run app debug nên k cần phải set cao tốn bộ nhớ RAM. Phần “Khởi động cài đăt” chọn “bản di động” và chọn 480×800. Ở đây là mình hướng dẫn setting cho bạn nào dùng máy cấu hình thấp. Các bạn muôn trải nghiệm tốt hơn thì cài đặt cấu hình cao lên nhé.

Sau khi cài đặt thông số xong, bạn nhấn “Lưu cài đăt” và đồng ý khởi động lại phần mềm. Kết quả sẽ được như thế này.

Nguyên liệu đã có đủ chúng ta tiến hành làm bánh. Bạn mở thư mục project của react native lên vào theo link sau “project/android\app\build\outputs\apk” nhấn 2 lần vào file app-debug.apk để cài nó vào Nox. Chờ một lúc bạn sẽ thấy app đó trên Nox.

Kéo file apk-debug.apk vào NOX

Giờ bạn hãy mở nó lên và nếu có thấy lỗi hiện lên thì đừng có lo lắng, vì còn vài thao tác nữa mới xong. Sau khi mở app lên bạn quay ra ngoài xem Nodejs có đang chạy không? Nếu không thì mở cửa sổ terminal lên và gõ tiếp lệnh npm start .

Quay lại cái app demo trên Nox của chúng ta. Các bạn vào biểu tượng 3 dấu gạch ngang trên màn hình Nox ở thanh công cụ bên phải, đó là nút Menu. Sẽ được như thế này.

Nhấn chọn “Dev Settings”, một màn hình mới hiện lên vào các bạn kéo xuống phần DEBUGGING nhân chọn “Debug server host & post for device”. Tiếp theo là bạn nhập theo cú pháp sau “<IP wifi của bạn>:8081”.

Sau đó nhấn “OK”. Các bạn tiếp tục nhấn Menu và chọn “Reload” là xong.

Chúc các bạn thành công. Bài sau mình sẽ đi vào phần đầu tiền là React Navigation. Mình sẽ không đi cụ thể các bài kiểu như kiến thức cơ bản