Chạy ứng dụng React Native (Android) trên Window
react-native
5
reactjs
34
White

Trung Trần viết ngày 28/03/2016

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 Files\Java\jdk1.6.0_10
ANDROID_HOME : Ex : C:\Program Files (x86)\Android\android-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:

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
view raw run.bat hosted with ❤ by GitHub

Mỗi lần muốn run app thì bạn chỉ cần click đúp vào file run.bat là được.

Good luck! :)

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Trung Trần

1 bài viết.
0 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Bài viết liên quan
White
0 1
Expo là gì? Expo là một bộ công cụ hỗ trợ lập trình React Native, cung cấp những tính năng giúp cuộc đời của dev dễ dàng hơn như: Đăng nhập với...
junsu viết 2 tháng trước
0 1
White
14 0
Giới thiệu cơ bản về Styled components 1. Styled components là gì? 1.1. Phương pháp css truyền thống Trước khi nói về styled components chúng ta...
danhuynhdev viết 11 tháng trước
14 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
1 bài viết.
0 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!