# React Native / Expo - [React Native官方文件](https://reactnative.dev/) 官方推薦安裝 Expo (React Native 框架) - [Expo官方文件](https://docs.expo.dev/get-started/set-up-your-environment/) - [展示DEMO](https://snack.expo.dev/?platform=ios) - [展示影片](https://docs.expo.dev/static/videos/tutorial/final.mp4) - 支援 TypeScript ## 安裝專案 (一) 建置專案 ``` npx create-expo-app@latest ``` 建置專案後會詢問，如專案後會詢問，使用預設即可 ```command - Ok to proceed? (y) //問你是否要繼續 - Creating an Expo project using the default template. //預設使用default模板 //提示如果要使用模板指令 -- template 打上名稱 To choose from all available templates pass in the --template arg: $ npx create-expo-app --template To choose from all available examples pass in the --example arg: $ npx create-expo-app --example ``` (二) 安裝測試APP : [Expo Go App](https://play.google.com/store/apps/details?id=host.exp.exponent&referrer=docs) (三) 啟動專案 ``` npx expo start ``` 打開手機 Expo Go App 掃QRCODE (需再同個網路環境) ![image](https://hackmd.io/_uploads/B1pwTaNLyl.png) 如發生網路問題可以使用 tunnel ``` npx expo start --tunnel ``` 連接後就可以同步開發，並用手機模擬畫面 Expo 啟動後指令 ``` › Press s │ switch to development build › Press a │ open Android //開啟手機模擬器 › Press w │ open web › Press j │ open debugger › Press r │ reload app › Press m │ toggle menu › shift+m │ more tools › Press o │ open project code in your editor › Press ? │ show all commands ``` 補充 : - Press a │ open Android 開啟手機模擬器 - IOS 指令預設隱藏為i ，需有macOS，並安裝Xcodea 編譯指令 ``` npx expo prebuild 編譯後會多一個資料夾 ``` ### EAS CLI [EAS文件](https://docs.expo.dev/eas/) EAS 雲端服務 : 可以綁定APP商店 同步發住到Android / ios 商店，也可以用local端編譯 ``` npm install -g eas-cli eas login //登入 eas build:configure //編譯至expo eas 雲端 ``` 登入後會將 Build 推至 Expo 後台 ![image](https://hackmd.io/_uploads/S151PZrLyg.png) ### SDK 元件 - Expo 有提供完整的SDK，常見的手機功能都有 每個使用的上方會寫相容性、安裝方法、Snack 範例 ![image](https://hackmd.io/_uploads/SJau1MB8kl.png) ![image](https://hackmd.io/_uploads/r1oElfH8kl.png) ``` npx expo install react-native-maps //地圖 npx expo install expo-camera //相機 npx expo install expo-notifications //推播 (測試ok) npx expo install expo-local-authentication //生物辨識 npx expo install expo-apple-authentication //APPLE登入 React Native Gesture Handler //手勢 ``` ## 開發工具 ### Orbit https://expo.dev/orbit Expo Orbit 是一個結合EAS 及 手機模擬器的開發工具 [影片展示1](https://docs.expo.dev/static/videos/orbit/basic-features.mp4)、[影片展示2](https://docs.expo.dev/static/videos/review/updates-with-orbit.mp4) 注意: 測試不同平台需安裝對應SDK的才能安裝， Android Studio & Xcode.