Expo + Development Client + VisionCamera

Expo の Camera や BarCodeScanner は単に写真撮影したり QR コードを読み取るだけであれば必要十分な機能を備えており、 Managed workflow でもそのまま使えるので便利。しかし、より細かなコントロールが必要になってきたら VisionCamera を使うのが良さそう、ということで試してみる。

• フォーカスの制御
• フレームの処理

Development Client と EAS build の準備

VisionCamera は React Native 用のネイティブモジュールなので、Expo Go がそのまま使えない。以下の手順で Development Client を導入し、EAS build でビルドできるようにしておく。

• Expo の Development Client を試す

VisionCamera のインストール

公式に手順が載っているのでそのまま試す。

• Getting Started | VisionCamera

app.config.js

plugins: [
  [
    'react-native-vision-camera',
    {
    },
  ],
],

app.config に ios.infoPlist.NSCameraUsageDescription があれば cameraPermissionText は不要っぽいので、オプションは空にしてある。

• 該当のソースコード
• これだと国際化もできないし、自分で InfoPlist 書く方が良さそう

ios: {
  infoPlist: {
    CFBundleAllowMixedLocalizations: true,
    NSCameraUsageDescription: 'Allow the app to access the camera',
  },
},
locales: {
  en: 'src/i18n/ios/en.json',
  ja: 'src/i18n/ios/ja.json',
},

あとは EAS でビルドする。

$ eas build --profile development --platform ios