用react组件写出手机端实现二维码扫描页面的代码

在React中，我们可以使用第三方库如`qrcode-reader`或`react-native-qrcode-scanner`来创建一个二维码扫描功能的页面。以下是一个基本的示例，展示如何使用`react-native-qrcode-scanner`库：

首先，你需要安装依赖：

npm install react-native-qrcode-scanner @react-native-community/image-picker

然后，在`App.js`或其他需要扫描功能的组件中，导入所需的模块并配置：

import React, { useEffect } from 'react';
import QRCodeScanner from 'react-native-qrcode-scanner';
import ImagePicker from '@react-native-community/image-picker';

const QRScanScreen = () => {
  const handleScanResult = (result) => {
    if (result?.data) {
      console.log('Scanned QR code:', result.data);
      // 在这里处理扫描到的数据
    }
  };

  const pickImage = async () => {
    let { status } = await ImagePicker.requestCameraPermissionsAsync();
    if (status !== 'granted') {
      alert('Sorry, camera permission is required!');
      return;
    }

    const scanOptions = {
      enableanzaBarcodes: true, // 可选：只扫描QR码，默认true
      formats: ['code_128', 'code_39', 'ean_13', 'ean_8'], // 可选：允许扫描的条形码格式
      onBarCodeRead: handleScanResult,
    };
    
    await QRCodeScanner.scan(scanOptions);
  };

  useEffect(() => {
    pickImage();
  }, []);

  return (
    <View style={{ flex: 1 }}>
      <QRCodeScanner />
    </View>
  );
};

export default QRScanScreen;

这个组件会在启动时请求相机权限，并在用户授权后开始扫描二维码。当扫描到二维码时，会调用`handleScanResult`函数处理结果。