-3

[React-Native] [Phần I] Hướng dẫn cách build source cho device Android.

Development OS: WINDOW

I. Chuẩn bị:

1. Cài đặt JDK tại: http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html

2. Cài đặt NodeJS tại: https://nodejs.org/en/#download

3. Open command line và gõ cmd: <npm install -g react-native-cli> để install React Native

4. Cài đặt bộ Android Studio tại: https://developer.android.com/studio/

5. Sau khi cài Android Studio thì tiến hành chọn: Files -> Settings > Di chuyển đến Appearance and Behavior -> System Settings -> Android SDK để cài platform mới nhất của Android.

6. Tiến hành Add Environment Variables bằng cách:

Right Click on My Computer > Goto Properties > Click on Advanced System Settings > Click on Environment Variables>Dưới hộp thoại System Variables click on New > Setting Variable Name là:ANDROID_HOME và Variable value là:{link tới folder SDK Manager}

7. Tạo React Native project :

  • Xin dev folder lưu trữ source React Native của dự án > Copy để ở local
  • Mở cmd từ folder React Native của dự án
  • Tiếp tục command <react-native init FirstProject> > Enter
  • Thư viện của React Native đang được install (Lúc này phải đảm bảo wifi của bạn hoạt động tốt)

II. Các bước để thực hiện build source để test:

1. Enable Debugging over USB

2. Kết nối device với laptop thông qua dây USB

  • Kết nối device với laptop
  • Select device mà bạn muốn build app

3. Run your app

  • Thực hiện gõ các cmd dưới để thực hiện build

E:\>cd reactnativeprojects

E:\ReactNativeProjects>cd firstproject

E:\ReactNativeProjects\FirstProject>react-native run-android

  • Nếu build THÀNH CÔNG bạn sẽ nhìn thấy nội dung như dưới:
E:\ReactNativeProjects\FirstProject>react-native run-android
Scanning 555 folders for symlinks in E:\ReactNativeProjects\FirstProject\node_mo
dules (134ms)
Starting JS server...
Building and installing the app on the device (cd android && gradlew.bat install
Debug)...
Download https://jcenter.bintray.com/com/facebook/react/react-native/0.42.3-atla
ssian-1/react-native-0.42.3-atlassian-1.pom
Incremental java compilation is an incubating feature.
:app:preBuild UP-TO-DATE
:app:preDebugBuild UP-TO-DATE
:app:checkDebugManifest
:app:preReleaseBuild UP-TO-DATE
:app:prepareComAndroidSupportAppcompatV72301Library
:app:prepareComAndroidSupportSupportV42301Library
:app:prepareComFacebookFbuiTextlayoutbuilderTextlayoutbuilder100Library
:app:prepareComFacebookFrescoDrawee101Library
:app:prepareComFacebookFrescoFbcore101Library
:app:prepareComFacebookFrescoFresco101Library
:app:prepareComFacebookFrescoImagepipeline101Library
:app:prepareComFacebookFrescoImagepipelineBase101Library
:app:prepareComFacebookFrescoImagepipelineOkhttp3101Library
:app:prepareComFacebookReactReactNative0442Library
:app:prepareComFacebookSoloaderSoloader010Library
:app:prepareOrgWebkitAndroidJscR174650Library
:app:prepareDebugDependencies
:app:compileDebugAidl
:app:compileDebugRenderscript
:app:generateDebugBuildConfig
:app:mergeDebugShaders
:app:compileDebugShaders
:app:generateDebugAssets
:app:mergeDebugAssets
:app:generateDebugResValues
:app:generateDebugResources
:app:mergeDebugResources
:app:bundleDebugJsAndAssets SKIPPED
:app:processDebugManifest
:app:processDebugResources
:app:generateDebugSources
:app:incrementalDebugJavaCompilationSafeguard
:app:compileDebugJavaWithJavac
:app:compileDebugJavaWithJavac - is not incremental (e.g. outputs have changed,
no previous execution, etc.).
:app:compileDebugNdk UP-TO-DATE
:app:compileDebugSources
:app:transformClassesWithDexForDebug
Running dex in-process requires build tools 23.0.2.
For faster builds update this project to use the latest build tools.
:app:mergeDebugJniLibFolders
:app:transformNative_libsWithMergeJniLibsForDebug
:app:processDebugJavaRes UP-TO-DATE
:app:transformResourcesWithMergeJavaResForDebug
:app:validateSigningDebug
:app:packageDebug
:app:assembleDebug
:app:installDebug
Installing APK 'app-debug.apk' on 'Marshmallow(AVD) - 6.0' for app:debug
Installed on 1 device.

<strong>BUILD SUCCESSFUL</strong>

Total time: 4 mins 53.489 secs
'adb' is not recognized as an internal or external command,
operable program or batch file.
Starting the app (E:\AndroidAppDevelopment\SDKManagerForAndroidStudio/platform-t
ools/adb shell am start -n com.firstproject/.MainActivity...
Starting: Intent { cmp=com.firstproject/.MainActivity }

CUỐI CÙNG, CHECK TRÊN DEVICE ANDROID CỦA BẠN SẼ THẤY APP ĐƯỢC MỞ.

III. Trải nghiệm app

IV. Reference:

  1. https://facebook.github.io/react-native/docs/signed-apk-android
  2. https://facebook.github.io/react-native/docs/running-on-device

All rights reserved

Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí