react native如何扫码
React Native 扫码实现方法
在 React Native 中实现扫码功能可以通过第三方库完成，以下是几种常用方案：
使用 react-native-camera 和 react-native-qrcode-scanner
安装依赖库：
npm install react-native-camera react-native-qrcode-scanner
# 或
yarn add 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}
flashMode={RNCamera.Constants.FlashMode.auto}
topContent={<Text>对准二维码进行扫描</Text>}
/>
);
}使用 react-native-vision-camera 和 vision-camera-code-scanner
安装依赖库：
npm install react-native-vision-camera vision-camera-code-scanner
# 或
yarn add 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>需要相机权限</Text>;
}
return (
<Camera
style={StyleSheet.absoluteFill}
device={device}
isActive={true}
frameProcessor={frameProcessor}
/>
);
}使用 react-native-barcode-mask
如需添加扫描框UI：
npm install react-native-barcode-mask结合使用示例：
import BarcodeMask from 'react-native-barcode-mask';
<QRCodeScanner
cameraStyle={styles.cameraContainer}
onRead={onSuccess}
>
<BarcodeMask width={300} height={300} />
</QRCodeScanner>注意事项
-
iOS需要添加相机权限描述到Info.plist：
<key>NSCameraUsageDescription</key> <string>需要相机权限进行扫码</string> -
Android需要在AndroidManifest.xml添加权限：
<uses-permission android:name="android.permission.CAMERA" /> -
部分库需要执行链接操作：
npx react-native link react-native-camera -
新版本React Native可能需要手动配置权限处理
