React Native(Expo)でQRコードを読み取ってみる

JavaScript

STEP1 : ライブラリのインストール

React Native(Expo)でQRコードを読み取るには expo-barcode-scanner を使用します。

BarCodeScanner - Expo Documentation
Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React.
docs.expo.dev

まずは expo-barcode-scanner をインストールしましょう。

npx expo install expo-barcode-scanner

STEP2 : QRコードスキャナを使ってみよう

前提知識1 : カメラの使用許可を取得する

カメラの使用許可は usePermissions というフックで取得ができます。

import { usePermissions } from 'expo-barcode-scanner'

const [ permission, requestPermission] = usePermissions()

permissionには許可のステータスが格納されています。

  • canAskAgain
  • expires
  • granted
  • status

がありますが、今回はgrantedを使用します。
grantedはカメラの使用が許可されているかを表します。

そして、requestPermissionで許可をユーザーにお願い🙇‍♂️することが可能です。

BarCodeScanner - Expo Documentation
Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React.
docs.expo.dev

前提知識2 : QRスキャナーのコンポーネント

QRスキャナー（カメラ画面）のコンポーネントは

import { BarCodeScanner } from 'expo-barcode-scanner';

<BarCodeScanner />

のようにして使います。

今回はpropsとして

  • barCodeTypes : スキャンするバーコードのタイプ（今回はQRコード）
  • onBarCodeScanned : スキャンした時の挙動

を使ってみます。

BarCodeScanner - Expo Documentation
Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React.
docs.expo.dev

実装してみる

コードはこのようになりました。

重要な箇所だけ解説します。

まず、８行目と３５行目で許可状況に応じて表示する内容を変えているのは、許可されていなければカメラが映らないからです。また、許可されていない場合では許可を申請できるようにボタンを配置してあります。

そして１３行目の onBarCodeScanned で条件分けをしているのは、QRコードを写している時はずっ〜と onBarCodeScanned が繰り返し実行されるので、この場合だとalertが大量発生してしまうからです。

import { StyleSheet, Button, View, Alert } from 'react-native';
import { BarCodeScanner, usePermissions } from 'expo-barcode-scanner';

export default function App() {
  const [ permission, requestPermission ] = usePermissions();
  let scanning = false

  if(permission?.granted){
    return (
      <View style={styles.container}>
        <BarCodeScanner
        barCodeTypes={[BarCodeScanner.Constants.BarCodeType.qr]}
        onBarCodeScanned={(scannerResult)=>{
          if(scanning){
          }
          else{
            scanning = true
            Alert.alert(
              "スキャン結果",
              scannerResult.data,
              [
                {
                  text: '閉じる',
                  onPress: ()=>{scanning=false}
                }
              ]
            )
          }
        }}
        style={styles.barCodeScanner}
        />
      </View>
    )
  }
  else{
    return (
      <View style={styles.container}>
        <Button
        title="カメラを開く"
        onPress={requestPermission}
        />
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  barCodeScanner: {
    height: '100%',
    width: '100%'
  }
});

requestPermission()を実行しても反応がない場合は、設定アプリでExpo Goにカメラ許可が与えられているか確認してみてください

STEP3 : QRスキャナーの動作確認

コメント