React Native 跨平台APP開發學習筆記(一):環境配置

Image for post
Image for post

React Native分為傳統的Native版、CRNA 版和Expo版

傳統Native版:iOS和Android的App entry point分開,但App裡面可以共用Component,以及可以安裝各自平台的Native packageCRNA版:只有一個App.js,基本上iOS和Android都是同一個App,不用處理平台間的分別,甚至不用安裝XCode或Android Studio但一些有Native dependencies的library不能用Expo版:不屬於官方版本。

選擇版本

如果你只是體驗一下React Native、在Sample Project裡隨便玩玩,請選擇CRNA版如果你要快速開發跨平台App、不需要太多Native功能如Background Location、不需要用react-native link的3rd-party libraries、不需要改xcode或android的project setting,使用Expo版如果你需要用到最完整的功能,使用傳統Native版

更詳細內容請參考

本文採用傳統 Native 版

環境配置

安裝node.js:https://nodejs.org/download/
// watchman 可以監看檔案是否有修改
安裝watchman,終端命令:npm install watchman -g
安裝flow:npm install flow -g
// 安裝 React Native command line 工具
npm install -g react-native-cli

在Windows上開發Android平台

1.安裝Android Studio

 選擇Custom,確認以下項目都有勾選
--Android SDK
--Android SDK Platform
--Performance (Intel ® HAXM) (AMD 处理器看这里)
--Android Virtual Device

2.安装 Android SDK

React Native需要Android 9版本的SDK
Appearance & Behavior → System Settings → Android SDK
進入SDK Manager,勾選 Show Package Details
確認"Android SDK Platform 28"和"Intel x86 Atom_64 System Image"都有安裝

環境變數設定

安裝 JAVA

1.設定JAVA_HOME使用者變數

新增"JAVA_HOME"的使用者變數"C:\Program Files\Java\jdk-12.0.1"

2.設定Path系統變數

在Path變數中,加入"C:\Program Files\Java\jdk-12.0.1\lib"   
#依自己安裝路徑設定

3.設定ANDROID_HOME使用者變數

新增"ANDROID_HOME"的使用者變數E:\AndroidSDK

4.在Path系統變數中新增platform-tools

在Path變數中,加入"X:\AndroidSDK\build-tools"   //依照自己安裝路徑設定

安裝react-native

npm install -g react-native-cli

建立新專案

react-native init AwesomeProjectreact-native init AwesomeProject --version 0.44.3 
//可以使用--version參數指定版本

開啟Android模擬器

開啟Android Studio->Configure->AVD Manager->Launch

執行APP

react-native run-android

不小心關掉CMD怎麼辦?

切回Project的目錄
npm start

修改APP

Image for post
Image for post
App.js
// 支援hot-reloading,可快速查看更新打開資料夾中的App.js,進行內容修改
連續點擊兩次"R"按鍵,查看更新
Image for post
Image for post

Debug模式

https://stackoverflow.com/a/43794596
Image for post
Image for post
點擊Ctrl+M進入上圖畫面
選擇Reload進行更新
點擊Enable Live Reload,當修改程式碼時,會自動更新APP畫面

編譯APP

React Native App設置&Android版發佈

編譯完的APK檔案在哪裡?

ReactNative_Project\android\app\build\outputs\apk\debug

Written by

Machine Learning / Deep Learning / Python / Flutter cakeresume.com/yanwei-liu

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store