Feeds:
文章
迴響

Archive for the ‘Android’ Category

之前使用 0.46.x 版本, 恰逢 0.47.x 釋出, 就來跑一下流程, 詳細可參考Upgrading to new React Native versions

  1. 安裝 react-native-git-upgrade 工具
    • yarn global add react-native-git-upgrade
  2. react-native 套件升級
    • yarn add react-native@0.47.0
  3. 專案升級
    • react-native-git-upgrade
  4. 重新打包 js bundle
  5. 重新產生 apk
廣告

Read Full Post »

依據 0.46 文件所進行的練習

1. 新增 ImagePickerModule 模組

檔案異動

  • \android\app\src\main\java\com\tools\
    • [Add] ImagePickerModule.java
    • [Modify] AnExampleReactPackage.java
  • \components\
    • [Add] ImagePickerModule.js
  • \
    • [Modify] index.android.js

 

ImagePickerModule.java

AnExampleReactPackage.java

ImagePickerModule.js

index.android.js

執行效果

 

 

 

Read Full Post »

依據 0.46 官方手冊走一遍

1. 新增 React Native Module 的 Java

新增檔案

/android/app/src/main/java/com/tools

  • AnExampleReactPackage.java
  • ToastModule.java

ToastModule.java

AnExampleReactPackage.java

2. Android 引入自訂 React Native Module

修改 android/app/src/main/java/com/rn001/MainApplication.java

3. 建立 React Native Js Module 簡易封裝

新增 /components/ToastAndroid.js

4. 測試 ToastAndroid

修改 index.android.js

打包 apk, gradlew assembleDebug

安裝 apk

啟動 packager

啟動 app

 

Read Full Post »

逍遙安卓好用就不多說了, 如果要用來開發React Native for Android 照標準流程會遇到蠻多坑,我自己的流程是分成幾個步驟

1. 產生 Debug Apk

SET ANDROID_HOME=D:\sdk\android\android-sdk-windows

react-native bundle –platform android –dev false –entry-file index.android.js –bundle-output android/app/src/main/assets/index.android.bundle –assets-dest android/app/src/main/res

gradlew assembleDebug

2. 逍遙手動安裝 apk

android\app\build\outpus\app-debug.apk

3. 啟動 Packager

set REACT_NATIVE_PACKAGER_HOSTNAME=192.168.1.106

npm start

4. 啟動 App 開發配置

5. 開發程式

一切順利就可以在電腦動態調整 js 直接在逍遙安卓就可以看到結果了…

補充

1. 如果資源檔有更新, 可能需要重新啟動 packager

2. 如果 Hot Reload 沒有生效, 試試手動 Reload

3. JS Remote Debug 需要再 PATH 上可以找到 chrome.exe, 用來查看 console.log 挺方便

Read Full Post »

開發環境

1. Windows 10

2. Android SDK

3. node 8.2.1

4. yarn 0.27.5

建立 Android App

md react-native
cd react-native
yarn init -y
yarn add react-native-cli
react-native init rn001
cd rn001
cd android\app
keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
調整 android/app/build.gradle 的簽章配置
cd ..
SET ANDROID_HOME=D:\sdk\android\android-sdk-windows
gradlew assembleRelease

補充1:  build.gradle 調整

(1) 依據 keytool 配置調整

補充2: Android SDK 版本

(2) Android 的 API 和 Build 版本要吻合, 否則會出錯, 預設產生的是 23, 可啟動 %ANDROID_HOME%\tools\android.bat 啟動 SDK Manager 確認

補充3 package.json

測試 apk

  • /android/app/build/outputs/apk/app-release.apk

目錄結構

/android
│  build.gradle
│  gradle.properties
│  gradlew
│  gradlew.bat
│  settings.gradle
│  
├─app
│  │  BUCK
│  │  build.gradle
│  │  proguard-rules.pro
│  │  
│ ├─build
│ │ ├─outputs
│ │ │ │ 
│ │ │ ├─apk
│ │ │ │ app-release.apk
│  └─src
│      └─main
│          │  AndroidManifest.xml   ; Android 配置檔
│          │  
│          ├─java
│          │  └─com
│          │      └─rn001
│          │              MainActivity.java
│          │              MainApplication.java
│          │              
│          └─res
│              ├─mipmap-hdpi
│              │      ic_launcher.png
│              │      
│              ├─mipmap-mdpi
│              │      ic_launcher.png
│              │      
│              ├─mipmap-xhdpi
│              │      ic_launcher.png
│              │      
│              ├─mipmap-xxhdpi
│              │      ic_launcher.png
│              │      
│              └─values
│                      strings.xml
│                      styles.xml
│                      
├─gradle
│  └─wrapper
│          gradle-wrapper.jar
│          gradle-wrapper.properties
│          
└─keystores
        BUCK
        debug.keystore.properties
/ios
├─rn001
│  │  AppDelegate.h
│  │  AppDelegate.m
│  │  Info.plist
│  │  main.m
│  │  
│  ├─Base.lproj
│  │      LaunchScreen.xib
│  │      
│  └─Images.xcassets
│      └─AppIcon.appiconset
│              Contents.json
│              
├─rn001-tvOS
│      Info.plist
│      
├─rn001-tvOSTests
│      Info.plist
│      
├─rn001.xcodeproj
│  │  project.pbxproj
│  │  
│  └─xcshareddata
│      └─xcschemes
│              rn001-tvOS.xcscheme
│              rn001.xcscheme
│              
└─rn001Tests
        Info.plist
        rn001Tests.m
/node_modules
/__tests__
.babelrc
.buckconfig
.flowconfig
.watchmanconfig
app.json
index.android.js
index.ios.js
package.json

 

Read Full Post »

之前手機設定了一張喜歡的桌布, 可是後來找不到原圖, 只剩下手機內的桌布, 網路上找了許多文章提到許多位置, 可惜我還是沒看到, 不過有人推薦了一個好用的 “Wallpaper Saver" 解決了我的問題, 有需要的人也可以試試….

Read Full Post »

[NDK] fplutil v1.0.0 測試

== 環境 ==
1. Windows XP
2. Android SDK
3. Android NDK r10d
4. Python 2.7
5. fplutil 1.0.0
6. Apache Ant 1.8.4
7. JDK 1.7

== 環境設定 ==
## Android SDK, NDK, Ant, Java 新增到 PATH 環境變數
SET PATH=%PATH%;D:\sdk\android\adt-bundle-windows-x86\sdk\tools;D:\sdk\android\android-ndk-r10d;D:\sdk\apache-ant-1.8.4\bin;C:\Program Files\Java\jdk1.7.0_07;c:\Python27;C:\WINDOWS\system32

== fplutil 目錄結構 ==

+---autobuild
|       build_android
|       build_android.cmd
|       build_android.py
|       
+---bin
|       android_ndk_perf
|       android_ndk_perf.cmd
|       android_ndk_perf.py
|       build_all_android
|       build_all_android.cmd
|       build_all_android.py
|       
+---buildutil
|   |   android.py
|   |   android.pyc
|   |   android_test.py
|   |   common.py
|   |   common.pyc
|   |   common_test.py
|   |   linux.py
|   |   linux_test.py
|   |   __init__.py
|   |   __init__.pyc
|   |   
|   \---__pycache__
|           __init__.cpython-33.pyc
|           
+---dependencies
|   \---googletest
|                   
+---disttools
|       config.json
|       push_package.py
|       __init__.py
|       
+---docs
|               
+---examples
|   +---buildutil_example
|   \---libfplutil_example
|                                                               
+---libfplutil
|   +---include
|   |   \---fplutil
|   |           main.h
|   |           print.h
|   |           version.h
|   |           
|   +---jni
|   |       Android.mk
|   |       Application.mk
|   |       
|   +---src
|   |       main.c
|   |       print.c
|   |       print_cxx.cc
|   |       
|   \---tests
|               
\---perf
    +---bin
    |   +---android-16
    |   +---android-17
    |   +---android-18
    |   \---android-19
    |               
    +---build
    |           
    \---tools
        |   LICENSE
        |   
        \---telemetry
            \---telemetry
                \---core
                    \---platform
                        \---profiler
                            \---perf_vis
                                    d3.v3.min.js
                                    jquery-1.11.0.min.js
                                    LICENSE-d3.v3.min.js.txt
                                    LICENSE-jquery.txt
                                    LICENSE-sammy.js.txt
                                    perf-vis
                                    perf-vis-template.html
                                    perf-vis.cmd
                                    perf-vis.py
                                    perf_to_tracing_json
                                    perf_to_tracing_json.cmd
                                    perf_to_tracing_json.py
                                    sammy-latest.min.js
                                    sequences.js

== 編譯內建範例 ==
## libfplutil_example
# 自動編譯, 打包, 安裝, 執行
#
cd libfplutil_example
..\..\bin\build_all_android -T debug -i -r
# 執行結果目錄結構

|   AndroidManifest.xml
|   build.xml
|   local.properties
|   main.c
|   proguard-project.txt
|   project.properties
|   
+---apks
|       example-debug.apk   ; 打包的 app
|       
+---bin
|   |   AndroidManifest.xml     ; 從 /AndroidManifest.xml 複製過來
|   |   AndroidManifest.xml.d
|   |   build.prop
|   |   example-debug-unaligned.apk
|   |   example-debug-unaligned.apk.d
|   |   example-debug.apk
|   |   example.ap_
|   |   example.ap_.d
|   |   
|   \---res
+---jni
|       Android.mk
|       Application.mk
|       
+---libs
|   +---armeabi-v7a
|   |       gdb.setup
|   |       gdbserver
|   |       libfplutil_example.so   ; 
|   |       
|   \---local
|       \---armeabi-v7a
|           |   libandroid_native_app_glue.a
|           |   libfplutil_example.so
|           |   libfplutil_main.a
|           |   libfplutil_print.a
|           |   
|           \---objs-debug
|                                                       
+---obj
\---res

## 手動編譯
# 切到 libfplutil_example 目錄
cd libfplutil_example

# 編譯
ndk-build.cmd
android update project –path . –target android-17 –name libfplutil_example
ant debug

# 安裝
adb install bin/libfplutil_example-debug.apk

# 測試
adb shell am start -S -n com.google.fpl.libfplutil.example/android.app.NativeActivity

參考資料
http://google.github.io/fplutil/libfplutil_example.html

Read Full Post »

Older Posts »