React Native 跨平台APP開發學習筆記(一)：環境配置
6 min readJun 2, 2019
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 Device2.安装 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
// 支援hot-reloading，可快速查看更新打開資料夾中的App.js，進行內容修改
連續點擊兩次"R"按鍵，查看更新
Debug模式
https://stackoverflow.com/a/43794596
點擊Ctrl+M進入上圖畫面選擇Reload進行更新
點擊Enable Live Reload，當修改程式碼時，會自動更新APP畫面編譯APP
React Native App設置&Android版發佈編譯完的APK檔案在哪裡？
ReactNative_Project\android\app\build\outputs\apk\debug