在React Native中，要使用react-native-vision-camera来扫描二维码或条纹码，你需要按照以下步骤操作：
- 安装
react-native-vision-camera和@react-native-community/barcode-scanner:
npm install react-native-vision-camera @react-native-community/barcode-scanner
- 链接原生模块（如果你使用的是React Native 0.60及以上版本，这一步应该会自动完成）:
npx pod-install
- 使用
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及以上版本。