如何为react-native-document-scanner添加相机遮罩

一、自定义遮罩组件（最简便无依赖） #

react-native-document-scanner-plugin的相机预览区域支持叠加自定义组件，你可以直接编写一个遮罩层覆盖在相机预览上方，核心思路是用绝对定位实现四周半透明遮罩、中间留透明扫描框：

import React from 'react';
import { View, StyleSheet } from 'react-native';
import DocumentScanner from 'react-native-document-scanner-plugin';

const ScannerWithMask = () => {
  return (
    <View style={styles.container}>
      {/* 文档扫描器相机预览 */}
      <DocumentScanner
        onDocumentScanned={(result) => console.log(result)}
        style={styles.scanner}
      />
      {/* 自定义遮罩层 */}
      <View style={styles.maskContainer}>
        {/* 顶部遮罩 */}
        <View style={styles.maskTop} />
        {/* 左右遮罩+中间扫描框 */}
        <View style={styles.middleRow}>
          <View style={styles.maskSide} />
          <View style={styles.scanFrame}>
            {/* 可选：添加扫描框的边框动画或提示 */}
          </View>
          <View style={styles.maskSide} />
        </View>
        {/* 底部遮罩 */}
        <View style={styles.maskBottom} />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    position: 'relative',
  },
  scanner: {
    flex: 1,
  },
  maskContainer: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
  maskTop: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.6)',
  },
  middleRow: {
    flexDirection: 'row',
    height: 250, // 扫描框高度，可自定义
  },
  maskSide: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.6)',
  },
  scanFrame: {
    width: 250, // 扫描框宽度，可自定义
    borderWidth: 2,
    borderColor: '#fff',
    backgroundColor: 'transparent',
  },
  maskBottom: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.6)',
  },
});

export default ScannerWithMask;

你可以根据需求调整遮罩透明度、扫描框的大小/样式，还能给扫描框添加动态线条动画增强提示效果。

二、适配的第三方包（无react-native-camera依赖） #

如果不想手动写组件，可以尝试react-native-scanner-mask这个包，它专门用于生成扫描类的遮罩层，不依赖react-native-camera，直接叠加在你的文档扫描器预览上即可：

1. 安装包：

npm install react-native-scanner-mask --save
# 或 yarn add react-native-scanner-mask

2. 使用示例：

import React from 'react';
import { View, StyleSheet } from 'react-native';
import DocumentScanner from 'react-native-document-scanner-plugin';
import ScannerMask from 'react-native-scanner-mask';

const ScannerWithMask = () => {
  return (
    <View style={styles.container}>
      <DocumentScanner
        onDocumentScanned={(result) => console.log(result)}
        style={styles.scanner}
      />
      <ScannerMask
        width={250}
        height={250}
        borderColor="#fff"
        borderWidth={2}
        maskColor="rgba(0,0,0,0.6)"
        // 可选：添加扫描线动画
        isShowScanLine={true}
        scanLineColor="#fff"
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    position: 'relative',
  },
  scanner: {
    flex: 1,
  },
});

export default ScannerWithMask;

这个包已经封装了遮罩、扫描框和动画，开箱即用，适合快速实现需求。

内容的提问来源于stack exchange，提问作者Ramanjeet