Expo|ReactNative 中实现扫描二维码功能

 Expo 项目中使用 `expo-barcode-scanner` 实现扫描二维码：

1、安装

expo install expo-barcode-scanner

 2、代码逻辑

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}><BarCodeScanneronBarCodeScanned={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` 函数，你可以在这里处理扫描到的数据。

在示例中，我用一个弹窗来展示扫描到的数据，你可以根据需求进行处理。