ReactNative相机扫码

在React Native中实现相机扫码功能，你可以使用react-native-camera库。以下是一个简单的示例，展示如何集成和使用这个库来实现扫码功能。

首先，安装react-native-camera库：

npm install react-native-camera --save

或者

yarn add react-native-camera

接下来，你需要链接原生相机和相册库：

react-native link react-native-camera

然后，你可以创建一个React Native组件来实现扫码功能：

import React, { useEffect, useRef, useState } from 'react';
import { Text, View, StyleSheet, Camera, PermissionsAndroid } from 'react-native';
 
const CameraScreen = () => {
  const camera = useRef(null);
  const [hasPermission, setHasPermission] = useState(null);
  const [scanned, setScanned] = useState(false);
 
  useEffect(() => {
    (async () => {
      const cameraPermission = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.CAMERA,
        {
          title: 'Camera Permission',
          message: 'Your camera will be used for scanning QR codes.',
          buttonNeutral: 'Ask Me Later',
          buttonNegative: 'Cancel',
          buttonPositive: 'OK',
        },
      );
      setHasPermission(cameraPermission === 'granted');
    })();
  }, []);
 
  if (hasPermission === null) {
    return <Text>Requesting for camera permission</Text>;
  }
  if (hasPermission === false) {
    return <Text>Camera permission is not granted</Text>;
  }
 
  return (
    <View style={styles.container}>
      <Camera
        ref={camera}
        style={styles.camera}
        type={Camera.Constants.Type.back}
        barCodeScannerSettings={{
          barCodeTypes: [Camera.Constants.BarCodeType.qr],
        }}
        onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
      />
      {scanned && <Text style={styles.scannedText}>Scanned!</Text>}
    </View>
  );
 
  function handleBarCodeScanned({ type, data }) {
    setScanned(true);
    // Handle the scanned code as needed
    console.log({ type, data });
  }
};
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
  },
  camera: {
    flex: 0,
    width: '100%',
    aspectRatio: Camera.constants.Aspect.fill,
    alignSelf: 'stretch',
  },
  scannedText: {
    flex: 0,
    textAlign: 'center',
    color: '#3