rn 扫描二维码/条纹码 react-native-vision-camera react-native react native 安卓扫码 条纹码

使用第三方库：QR/Barcode Scanning | VisionCamera

下载： npm i react-native-vision-camera

打开您的项目AndroidManifest.xml并在标记内添加以下行<manifest>：

<uses-permission android:name="android.permission.CAMERA" />

要在用户安装您的应用程序时下载模型，请将其添加到您的AndroidManifest.xml文件中：

<meta-data
android:name="com.google.mlkit.vision.DEPENDENCIES"
android:value="barcode" />

在app/build.gradle添加 implementation('com.google.mlkit:barcode-scanning:17.2.0')

调用代码：

import { useFocusEffect, useIsFocused } from "@react-navigation/native";

import React, { useEffect, useState } from "react";

import { AppState, BackHandler, DrawerLayoutAndroid, Linking, PermissionsAndroid, View } from "react-native";

import { Camera, useCameraDevice, useCodeScanner, } from "react-native-vision-camera"

export const ScanScreen: React.FC = () => {

    const device = useCameraDevice('back');

    const isFocused = useIsFocused()

    const codeScanner = useCodeScanner({

        codeTypes: ['qr', 'ean-13'],

        onCodeScanned: (codes) => {

            console.log(`Scanned ${codes.length} codes!`)

        }

    });

    useEffect(() => {

        // console.log(device, 'device')

        onAuth()

        const fors = AppState.addEventListener('focus', () => {

            console.log('进来了')

            onAuth()

        });

        return () => {

            fors.remove()

        }

    }, []);

    const onAuth = async () => {

        const granted = await PermissionsAndroid.request(

            PermissionsAndroid.PERMISSIONS.CAMERA);

        if (granted === PermissionsAndroid.RESULTS.GRANTED) {

            console.log('开启摄像头成功')

        } else {

            Linking.openSettings()

        }

    }

    if (device == null) return <View></View>

    return <Camera

        photo={false}

        video={false}

        isActive={isFocused}

        style={{ height: '100%', width: '100%', }}

        onError={(error) => {

            // console.error(error)

        }}

      device={device} codeScanner={codeScanner} />

}

#react-native-vision-camera #react-native-camera