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

在React Native中，要使用react-native-vision-camera来扫描二维码或条纹码，你需要按照以下步骤操作：

1. 安装react-native-vision-camera和@react-native-community/barcode-scanner:

npm install react-native-vision-camera @react-native-community/barcode-scanner

2. 链接原生模块（如果你使用的是React Native 0.60及以上版本，这一步应该会自动完成）:

npx pod-install

3. 使用BarCodeScanner组件和VisionCamera组件来实现扫描功能。

以下是一个简单的示例代码，展示如何使用react-native-vision-camera和@react-native-community/barcode-scanner来实现二维码扫描功能：

import React, { useEffect, useRef } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { VisionCamera, BarCodeScanner } from '@react-native-vision-camera/barcode-scanner';
 
const CameraScanner = () => {
  const cameraRef = useRef(null);
  const barcodeScannerRef = useRef(null);
 
  useEffect(() => {
    const startCamera = async () => {
      if (cameraRef.current) {
        await cameraRef.current.startPreview();
      }
    };
    startCamera();
  }, []);
 
  const handleBarCodeScanned = ({ type, data }) => {
    if (type === BarCodeScanner.Constants.BarCodeType.qr) {
      console.log('Scanned QR code:', data);
      // Handle QR code scanned, e.g. navigate to screen or show modal
    }
  };
 
  return (
    <View style={styles.container}>
      <VisionCamera
        ref={cameraRef}
        onBarCodeScanned={barcodeScannerRef.current ? handleBarCodeScanned : undefined}
        barCodeScannerMode={BarCodeScanner.Constants.BarCodeMode.qr}
        style={styles.camera}
      />
      <BarCodeScanner
        ref={barcodeScannerRef}
        onBarCodeScanned={handleBarCodeScanned}
        barCodeTypes={[BarCodeScanner.Constants.BarCodeType.qr]}
        style={StyleSheet.absoluteFillObject}
      />
    </View>
  );
};
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  camera: {
    flex: 1,
  },
});
 
export default CameraScanner;

请确保你的应用有相应的相机权限，并在app.json或Info.plist中配置。

注意：react-native-vision-camera目前处于实验阶段，可能会有不稳定的情况发生。此外，这个库需要iOS 11及以上版本，以及Android 5.0及以上版本。