hms-scan-view

hms-scan-view-react-navite

Installation

npm install hms-scan-view

Setting ios

Add the following to ios/Runner/Info.plist

<key>NSCameraUsageDescription</key>
<string>Explain to the user here why you need the permission</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Explain to the user here why you need the permission</string>

Setting android

<!--相机权限-->
<uses-permission android:name="android.permission.CAMERA" />
<!--文件读取权限，Android 12及更低版本申请-->
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<!--读存储（媒体和文件）权限，Android 13及更高版本申请-->
<uses-permission android:name="android.permission.READ_MEDIA_IMAGES"/>
<uses-permission android:name="android.permission.READ_MEDIA_VIDEO"/>
<uses-permission android:name="android.permission.READ_MEDIA_AUDIO"/>

Usage

import { HmsScanView } from 'hms-scan-view';
import type { ScanResult, CutArea, HmsScanViewRef } from 'hms-scan-view';
import { Text, View, StyleSheet, Switch, Button } from 'react-native';
import { useState, useRef } from 'react';

export default function App() {
  const [scanResult, setScanResult] = useState<ScanResult | null>(null);
  const [useCutArea, setUseCutArea] = useState(false);
  const [continuousScan, setContinuousScan] = useState(true);
  const scanViewRef = useRef<HmsScanViewRef>(null);

  // 自定义扫码区域 - 中心100x100的区域
  const customCutArea: CutArea = {
    x: 150, // 从左侧开始的位置
    y: 200, // 从顶部开始的位置
    width: 200, // 宽度
    height: 200, // 高度
  };

  const handleScanResult = (result: ScanResult) => {
    console.log('扫描结果:', result);
    setScanResult(result);
  };

  // 暂停扫描
  const handlePauseScan = () => {
    if (scanViewRef.current) {
      scanViewRef.current.pauseContinuouslyScan();
    }
  };

  // 恢复扫描
  const handleResumeScan = () => {
    if (scanViewRef.current) {
      scanViewRef.current.resumeContinuouslyScan();
    }
  };

  return (
    <View style={styles.container}>
      {scanResult ? (
        <View style={styles.resultContainer}>
          <Text style={styles.resultTitle}>扫描结果:</Text>
          <Text style={styles.resultText}>{scanResult.text || JSON.stringify(scanResult)}</Text>
        </View>
      ) : (
        <Text style={styles.instructions}>请扫描二维码或条形码</Text>
      )}
      
      <View style={styles.optionsContainer}>
        <View style={styles.optionRow}>
          <Text>使用自定义扫码区域: </Text>
          <Switch
            value={useCutArea}
            onValueChange={setUseCutArea}
          />
        </View>
        
        <View style={styles.optionRow}>
          <Text>连续扫描: </Text>
          <Switch
            value={continuousScan}
            onValueChange={setContinuousScan}
          />
        </View>
        
        {continuousScan && (
          <View style={styles.buttonContainer}>
            <Button title="暂停扫描" onPress={handlePauseScan} />
            <View style={{ width: 10 }} />
            <Button title="恢复扫描" onPress={handleResumeScan} />
          </View>
        )}
      </View>
      
      <View style={styles.scannerContainer}>
        <HmsScanView 
          ref={scanViewRef}
          style={styles.scanner} 
          onScanResult={handleScanResult}
          cutArea={useCutArea ? customCutArea : undefined}
          continuouslyScan={continuousScan}
        />
        
        {/* 如果启用了自定义扫码区域，显示一个指示框 */}
        {useCutArea && (
          <View 
            style={[
              styles.cutAreaIndicator, 
              {
                left: customCutArea.x,
                top: customCutArea.y,
                width: customCutArea.width,
                height: customCutArea.height,
              }
            ]} 
          />
        )}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 20,
  },
  scannerContainer: {
    width: '100%',
    height: 500,
    marginTop: 20,
    overflow: 'hidden',
    borderRadius: 8,
    position: 'relative', // 添加相对定位，以便cutAreaIndicator可以相对于它定位
  },
  scanner: {
    flex: 1,
  },
  instructions: {
    fontSize: 16,
    marginBottom: 20,
    textAlign: 'center',
  },
  resultContainer: {
    width: '100%',
    padding: 15,
    backgroundColor: '#f0f0f0',
    borderRadius: 8,
    marginBottom: 20,
  },
  resultTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 10,
  },
  resultText: {
    fontSize: 14,
  },
  // 选项容器样式
  optionsContainer: {
    width: '100%',
    marginBottom: 15,
  },
  // 选项行样式
  optionRow: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginBottom: 10,
  },
  // 按钮容器样式
  buttonContainer: {
    flexDirection: 'row',
    justifyContent: 'center',
    marginTop: 10,
    marginBottom: 10,
  },
  // 添加自定义扫码区域开关的样式
  cutAreaToggle: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 10,
  },
  // 添加自定义扫码区域指示框的样式
  cutAreaIndicator: {
    position: 'absolute',
    borderWidth: 2,
    borderColor: 'red',
    backgroundColor: 'rgba(255, 0, 0, 0.1)',
  },
});

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library