Chạy ứng dụng React Native (Android) trên Window

Mục đích của cái log này là gì?

ReactJS và React Native đang là những cái tên khá hot hiện nay, với phương châm "Learn once, write anywhere" , bộ đôi này giúp cho các Developer với kiến thức Javascript tốt có thể dễ dàng dev app cho cả IOS và Android.

Tuy nhiên, Facebook team chỉ chính thức hỗ trợ cho người dùng MAC OS, còn Linux và Window sẽ do cộng đồng đóng góp và hỗ trợ lẫn nhau nên sẽ có đôi chút khó khăn cho người dùng 2 HĐH này. Bản thân mình cũng đã gặp 1 số khó khăn trong việc setup project Android đầu tiên trên Window, nên có note lại 1 số điểm, các bạn có thể tham khảo để chạy ứng dụng React Native đầu tiên của mình :).

Environment setup

Documentation tại đây : https://facebook.github.io/react-native/docs/android-setup.html#content

• NodeJS và NPM phiên bản mới nhất (recommended)
• Java SDK
• Android SDK , nhớ mở Android Manager và cài thêm các packages theo links trên. Bước này sẽ tốn kha khá thời gian đấy, mình cho nó chạy rồi đi ngủ luôn cho phẻ :)).
• Genymotion để làm Emulator
• Add thêm Environment Variables cho Window ( How to...)

JAVA_HOME : Ex C:Program FilesJavajdk1.6.0_10
ANDROID_HOME : Ex : C:Program Files (x86)Androidandroid-sdk

Run 1st app

Documentation tại đây : https://facebook.github.io/react-native/docs/tutorial.html#content

Cài react-native

Cài package react-native với scope global , sau khi install bạn có thể run react-native trong command line :

npm install -g react-native-cli

Tải ứng dụng đầu tiên

react-native init AwesomeProject --debug
Mình gặp vài lỗi khi chạy lệnh này, option --debug sẽ hiển thị thêm thông tin lỗi (nếu có), tùy theo error message mà bạn có thể tìm cách fix nó.

Run it!

Bạn cần 1 Android device kết nối với máy tính hoặc 1 Android Emulator mở sẵn trước khi run app. Với Emulator, nếu bạn đã cài Genymotion, bật nó lên, tạo một device ảo và start nó.

Trên window thì packager của React Native sẽ không auto start. Nên các bạn phải mở 1 cửa sổ command line và manual start nó trước khi chạy app.

Run React Native packager : react-native start

Giữ cửa sổ trên running và mở cửa sổ command line mới để run app

react-native run-android

App sẽ được mở trong device/emulator của bạn. Bây giờ bạn có thể edit file index.android.js để dev app được rồi. React Native hỗ trợ quick reload hoặc auto reload JS quen thuộc với các bạn làm Frontend, bạn sẽ không phải build lại app cho mỗi thay đổi như cách dev app truyền thống nữa.

Tip

Như vậy mỗi lần run app bạn cần phải mở 2 cửa sổ command line để type lệnh. Nếu muốn nhanh hơn, bạn có thể tạo 1 file run.bat tại project root với nội dung như sau

set /p id="(Reminder) Did you start a vm? and is it available in adb? "
start cmd /k react-native start
rem *** HACK ALERT: Sleep for 10 seconds ***
ping -n 10 127.0.0.1 > nul
start cmd /k react-native run-android

credit:

Good luck! :)