---
# System prepended metadata

title: React Native / Expo

---

# 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.