react native如何扫码
React Native 扫码实现方法
在 React Native 中实现扫码功能通常需要借助第三方库，以下是几种常用的方法：
使用 react-native-camera 和 react-native-qrcode-scanner
安装依赖库：
npm install react-native-camera react-native-qrcode-scanner基础扫码组件实现：
import QRCodeScanner from 'react-native-qrcode-scanner';
function ScanScreen() {
const onSuccess = (e) => {
console.log('Scanned data:', e.data);
// 处理扫描结果
};
return (
<QRCodeScanner
onRead={onSuccess}
showMarker={true}
reactivate={true}
reactivateTimeout={5000}
/>
);
}使用 react-native-vision-camera 和 vision-camera-code-scanner
安装依赖库：
npm install react-native-vision-camera vision-camera-code-scanner实现代码：
import {useScanBarcodes, BarcodeFormat} from 'vision-camera-code-scanner';
function ScanScreen() {
const [hasPermission, setHasPermission] = useState(false);
const [scannedData, setScannedData] = useState('');
const [frameProcessor, barcodes] = useScanBarcodes([BarcodeFormat.QR_CODE]);
useEffect(() => {
(async () => {
const status = await Camera.requestCameraPermission();
setHasPermission(status === 'authorized');
})();
}, []);
useEffect(() => {
if (barcodes.length > 0) {
setScannedData(barcodes[0].displayValue);
}
}, [barcodes]);
if (!hasPermission) {
return <Text>No camera permission</Text>;
}
return (
<Camera
style={StyleSheet.absoluteFill}
device={device}
isActive={true}
frameProcessor={frameProcessor}
/>
);
}使用 react-native-barcode-mask
安装依赖库：
npm install react-native-barcode-mask结合使用示例：
import {RNCamera} from 'react-native-camera';
import BarcodeMask from 'react-native-barcode-mask';
function ScanScreen() {
const onBarCodeRead = (result) => {
console.log('Barcode data:', result.data);
};
return (
<RNCamera
style={styles.preview}
onBarCodeRead={onBarCodeRead}
captureAudio={false}>
<BarcodeMask width={300} height={100} />
</RNCamera>
);
}注意事项
确保在 Android 的 AndroidManifest.xml 中添加相机权限：
<uses-permission android:name="android.permission.CAMERA" />对于 iOS，需要在 Info.plist 中添加相机使用描述：
<key>NSCameraUsageDescription</key>
<string>需要相机权限来进行扫码</string>各库的性能特点：
- react-native-camera 兼容性好但体积较大
- react-native-vision-camera 性能更优但需要 RN 0.63+
- 简单场景可使用 react-native-qrcode-scanner 快速集成
以上方法可根据项目需求选择适合的方案实现扫码功能。
