Expo 项目中使用 `expo-barcode-scanner` 实现扫描二维码:
1、安装
expo install expo-barcode-scanner
2、代码逻辑
javascript
import React, { useState, useEffect } from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';
import { BarCodeScanner } from 'expo-barcode-scanner';
export default function QRScanner() {
const [hasPermission, setHasPermission] = useState(null);
const [scanned, setScanned] = useState(false);
const [scannedData, setScannedData] = useState(null);
useEffect(() => {
(async () => {
const { status } = await BarCodeScanner.requestPermissionsAsync();
setHasPermission(status === 'granted');
})();
}, []);
const handleBarCodeScanned = ({ type, data }) => {
setScanned(true);
setScannedData(data);
// 处理扫描到的二维码数据
alert(`扫描到的数据类型:${type},数据内容:${data}`);
};
if (hasPermission === null) {
return <Text>请求相机权限中...</Text>;
}
if (hasPermission === false) {
return <Text>未获得相机权限</Text>;
}
return (
<View style={styles.container}>
<BarCodeScanner
onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
style={StyleSheet.absoluteFillObject}
/>
{scanned && (
<Button title="重新扫描" onPress={() => setScanned(false)} />
)}
{scannedData && <Text>扫描到的数据:{scannedData}</Text>}
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
},
});
以上代码使用了 `BarCodeScanner` 组件来扫描二维码。该组件会检查用户是否已授予相机权限,并根据权限状态显示相应的内容。当扫描到二维码时,会触发 `handleBarCodeScanned` 函数,你可以在这里处理扫描到的数据。
在示例中,我用一个弹窗来展示扫描到的数据,你可以根据需求进行处理。