反应原生 | 世博会 - BarCodeScanner

简介

BarCodeScanner 是一个基于 React Native 开发的用于扫描条码的组件。它能够捕捉各种类型的条码，提供了丰富的配置选项和回调函数，具有高度的可定制性和灵活性，适用于多种场景和应用。

特点

• 基于 React Native，易于集成和使用；
• 支持多种类型的条码和格式，如二维码、一维码等；
• 提供了多种选项和设置，如扫描区域、光线等；
• 支持自定义 UI 和样式，如扫描线条和提示信息等；
• 提供了多个回调函数和状态，如扫描成功、失败、取消等；
• 具有性能高效、响应迅速、稳定可靠等优点。

使用方法

import React, { useState } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { BarCodeScanner } from 'expo-barcode-scanner';

export default function App() {
  const [hasPermission, setHasPermission] = useState(null);
  const [scanned, setScanned] = useState(false);

  const handleBarCodeScanned = ({ type, data }) => {
    setScanned(true);
    alert(`Bar code with type ${type} and data ${data} has been scanned!`);
  };

  const askForCameraPermission = () => {
    (async () => {
      const { status } = await BarCodeScanner.requestPermissionsAsync();
      setHasPermission(status === 'granted');
    })();
  };

  if (hasPermission === null) {
    return <View><Text>Requesting for camera permission</Text></View>;
  }
  if (hasPermission === false) {
    return <View><Text>No access to camera</Text></View>;
  }

  return (
    <View style={styles.container}>
      <BarCodeScanner
        onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
        style={StyleSheet.absoluteFillObject}
      />

      {scanned && <Button title={'Tap to Scan Again'} onPress={() => setScanned(false)} />}
    </View>
  );
}

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

参数说明

BarCodeScanner 组件的常见参数和属性如下：

• onBarCodeScanned: 回调函数，当扫描到条码时触发，可通过参数获取条码信息；
• barCodeTypes: 数组类型，指定支持扫描的条码类型和格式，默认为所有类型；
• type: 字符串类型，指定扫描的条码类型，默认为二维码；
• torchMode: 字符串类型，指定照明模式，可选值为 off、on、auto，默认为 off；
• cameraType: 字符串类型，指定前后摄像头，可选值为 front、back，默认为 back；
• focusMode: 字符串类型，指定聚焦模式，可选值为 on、off、auto，默认为 on；
• ratio: 字符串类型，指定相对尺寸，可选值为 16:9、4:3、1:1、2:3、3:4、9:16，默认为 16:9；
• useCamera2Api: 布尔类型，指定是否使用 Camera2 API，默认为 false；
• barCodeScannerSettings: 对象类型，表示扫描器的配置信息，包括各种选项和参数，比如扫描区域、光源强度、扫描线颜色、提示信息等；
• style: 对象类型，指定组件的样式和布局，如位置、大小、背景等。

系统需求

• iOS 10 或以上版本；
• Android 6.0（API 23）或以上版本。

参考文献

• React Native 入门教程 - BarCodeScanner
• Expo 开发文档 - BarCodeScanner