React Native Elements开发环境 & 生成项目 & 虚拟机调试 & 本地生成APK档 & 虚拟机运行APK档

1.0 開發環境

java -version
java version "11.0.11" 2021-04-20 LTS
Java(TM) SE Runtime Environment 18.9 (build 11.0.11+9-LTS-194)
Java HotSpot(TM) 64-Bit Server VM 18.9 (build 11.0.11+9-LTS-194, mixed mode)

　　JDK 11.0.11

 

node -v
v14.16.1

　　Node 14.16.1

 

visual studio installer - node development & desktop development with C++

 

必需高於API 31版本，否則不支援React Native。

 

adb version
Android Debug Bridge version 1.0.41
Version 31.0.2-7242960
Installed as C:\Users\Kennychan\AppData\Local\Android\Sdk\platform-tools\adb.exe

　　adb 31.0.2-7242960

 

 

 

ANDROID_HOME: 安裝android studio時會自動加入。
JAVE_HOME: 可切換JDK版本。
Path -> platform-tools: adb的根目錄。

 

2.0 生成项目

RN Elements官方推薦使用Expo CLI云開發，但我建議本地開發，所以還是使用create-react-native-app腳手架。

npx create-react-native-app reactnative001

　　腳手架生成目錄。

npm i @rneui/themed
npm i --save react-native-vector-icons
npm i react-native-safe-area-context
npm i @rneui/themed @rneui/base

　　安裝packages。

 

3.0 虚拟机调试

  

運行虚拟机。

 

adb devices -l
List of devices attached
emulator-5554          device product:sdk_gphone64_x86_64 model:sdk_gphone64_x86_64 device:emulator64_x86_64_arm64 transport_id:2

　　成功運行虚拟机-5554。

 

npm run android

　　運行項目。

 

4.0 本地生成APK档

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

　　生成android目錄。

 

手動新增folder: %PEOJECT_ROOT%\android\app\src\main\assets。如果沒圖片，就不會有這assets目錄，引致報錯。

cd android && gradlew assembleDebug && adb install %PROJECT_ROOT%\android\app\build\outputs\apk\debug\app-debug.apk

　　本地生成APK档

 

5.0 虚拟机運行APK档

adb install %PROJECT_ROOT%\android\app\build\outputs\apk\debug\app-debug.apk

　　虚拟机運行APK档