如何在 RN中 使用扫描二维码功能

在 React Native 中，可以使用第三方库 `react-native-camera` 来实现二维码扫描功能。

首先，在你的 React Native 项目中安装 `react-native-camera` 库：

npm install react-native-camera --save

接着，将 `react-native-camera` 库添加到项目中。在 iOS 中，需要使用 CocoaPods，在项目的 `Podfile` 中添加以下代码：

pod 'react-native-camera', :path => '../node_modules/react-native-camera'

在 Android 中，在项目的 `build.gradle` 文件中添加以下代码：

dependencies {
    implementation project(":react-native-camera")
    // ...
}

然后，运行 `pod install` 或 `gradlew clean` 命令来安装库。

接下来，创建一个名为 `QRCodeScanner` 的组件，并在其中使用 `react-native-camera` 库来实现二维码扫描功能。以下是一个简单的示例：

import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import { RNCamera } from 'react-native-camera';

class QRCodeScanner extends Component {
  onBarCodeRead = (e) => {
    // 处理扫描到的二维码数据
    console.log(e.data);
  };

  render() {
    return (
      <View style={styles.container}>
        <RNCamera
          style={styles.preview}
          type={RNCamera.Constants.Type.back}
          flashMode={RNCamera.Constants.FlashMode.off}
          onBarCodeRead={this.onBarCodeRead}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
  },
  preview: {
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
});

export default QRCodeScanner;

在上面的示例中，创建了一个名为 `QRCodeScanner` 的组件，其中使用了 `RNCamera` 组件来渲染相机预览界面，并通过 `onBarCodeRead` 回调函数处理扫描到的二维码数据。

最后，将 `QRCodeScanner` 组件添加到你的应用程序中即可使用二维码扫描功能。