使用 React Native 和 Barcode Scanner 构建条形码扫描功能

import React, { useEffect, useState } from 'react';
import { Text, View, Button, StyleSheet } from 'react-native';
import BarcodeScanner from 'react-native-barcodescanner';
 
export default function BarcodeScannerExample() {
  const [scanned, setScanned] = useState(false);
 
  useEffect(() => {
    if (scanned) {
      // 扫描后的处理逻辑，例如导航回首页或其他操作
    }
  }, [scanned]);
 
  const handleBarcodeScanned = ({ type, data }) => {
    setScanned(true);
    // 扫描结果处理，例如导航到详情页或存储数据
    console.log(`Barcode scanned: ${data} of type ${type}`);
  };
 
  return (
    <BarcodeScanner
      onBarCodeScanned={scanned ? undefined : handleBarcodeScanned}
      style={StyleSheet.absoluteFillObject}
    >
      <View>
        {scanned ? (
          <Text>扫描完成，请等待导航</Text>
        ) : (
          <Text>扫描条形码或二维码</Text>
        )}
        <Button title="返回" onPress={() => setScanned(true)} />
      </View>
    </BarcodeScanner>
  );
}
 
const styles = StyleSheet.create({
  // 样式定义
});

这段代码展示了如何在React Native应用中使用BarcodeScanner组件来实现扫描功能。它使用了React的useState和useEffect钩子来管理扫描状态，并在扫描完成后执行导航或其他逻辑。