[RN] 看YT學React Native – 使用相機模組(Camera)

idobest

前言:

這是一個使用相機模組的範例，在YT上面要找到符合我的需求的
沒想到最後找到一個用西班牙語?的教學影片，我一句都聽不懂的情況下
照著影片keyin 還是順利完成

我的教材選擇標準:

1.要用EXPO
2.要使用Function的寫法(要用Hook)，不要Class
3.影片長度要10分以上30分以內
4.程式內容要簡單，也不要有複雜的UI介面
單一檔案最好(App.js)

目前開發環境:

node.js: v14.17.6
npm: 6.14.15
react: 17.0.1
react-native: 0.64.3
expo: 44.0.4
※手機需要安裝 EXPO Go (Android / iOS)

程式碼:

圖1:

圖1

圖2:

圖2

心得總結:

1. 使用 useRef (第一次用不是很熟)
2. 用到 Permissions (第一次用不是很熟)
3. 使用 expo-camera套件
4. 使用 image套件
5. 使用 Modal套件 (第一次用不是很熟)

註解:

影片的內容(part1)很順利地做完，做第二片(part2)實作存檔功能時就卡關了

expo-permissions is now deprecated ...又碰到 套件被放生的情況
還有在stackoverflow 有查到替代的方案，順利解決。

圖3: 第一次開啟程式時會要求相機的使用權限

圖3

圖4: 照片都會存在DCIM的資料夾內，在模擬器裡用檔案管理員可以查看

圖4

範例 source code:

git clone https://smilehsu@bitbucket.org/smilehsu/rn_example_camera.git

Reference: