diff --git a/en/react-native-barcode-mask.md b/en/react-native-barcode-mask.md new file mode 100644 index 0000000000000000000000000000000000000000..0c0eaee0d9cff7fc1e21a1a9265f95e522e06209 --- /dev/null +++ b/en/react-native-barcode-mask.md @@ -0,0 +1,192 @@ +> 模板版本:v0.2.2 + +

+

react-native-barcode-mask

+

+

+ + Supported platforms + + + License + +

+ +> [!Tip] [GitHub address](https://github.com/shahnawaz/react-native-barcode-mask) + +## Installation and Usage + +Go to the project directory and execute the following instruction: + + + +#### **npm** + +```bash +npm install react-native-barcode-mask +``` + +#### **yarn** + +```bash +yarn add react-native-barcode-mask +``` + + + +### Example + +The following code demonstrates a use case of this library in combination with a camera component: + +> [!WARNING] The import name of the library remains the same when in use. + +```javascript +import React, { useState, useEffect } from 'react'; +import { StyleSheet, View, Text } from 'react-native'; +import BarcodeMask from 'react-native-barcode-mask'; +import { Camera, useCameraDevice, useCameraPermission } from 'react-native-vision-camera'; + +export default function SimplifiedScannerDemo() { + const [layoutInfo, setLayoutInfo] = useState(null); + + // Vision Camera Hooks + const device = useCameraDevice('back'); + const { hasPermission, requestPermission } = useCameraPermission(); + + useEffect(() => { + if (!hasPermission) { + requestPermission(); + } + }, [hasPermission, requestPermission]); + + // Callback function after BarcodeMask finishes measuring its layout + const handleLayoutMeasured = ({ nativeEvent }) => { + if (!layoutInfo) { + setLayoutInfo(nativeEvent.layout); + } + }; + + if (!device) { + return No camera device found; + } + + if (!hasPermission) { + return null; + } + + return ( + + {/* Dynamically positioned camera clipping window */} + {layoutInfo && ( + + + + )} + + {/* Barcode scanner mask overlay */} + + + ); +} + +// Stylesheet +const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: 'black', + }, + infoText: { + color: 'white', + fontSize: 16, + textAlign: 'center', + }, + cameraClip: { + position: 'absolute', + overflow: 'hidden', + }, +}); +``` + +Hint: Platform camera permissions need to be configured; ensure the mask layer is on top; if you need to display the camera view only within the frame, you can use the coordinates returned by onLayoutMeasured to clip the Camera container. + +## Constraints + +## Compatibility + +This document is verified based on the following versions: + +react-native-harmony:0.72.86; SDK:HarmonyOS 5.1.0.125; IDE:DevEco Studio 5.1.0.849; ROM:5.0.0.150; + +react-native-harmony:0.77.18; SDK:HarmonyOS 5.1.0.125; IDE:DevEco Studio 5.1.0.849; ROM:5.0.0.150; + +## Props + +> [!TIP] The "Platform" column indicates the platforms supported by the original third-party library. + +> [!TIP] In the "HarmonyOS Support" column, `yes` means the prop is supported on the HarmonyOS platform, `no` means it is not supported, and `partially` means it is partially supported. The usage is consistent across platforms, with the effect aiming to match the iOS or Android implementation. + +### Dimension Props + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :--- | :--- | :--- | :--- | :--- | :--- | +| `width` | Finder's width (the visible area). Default: 280 | number/string | No | All | yes | +| `height` | Finder's height (the visible area). Default: 230 | number/string | No | All | yes | +| `edgeWidth` | Edge/Corner's width. Default: 20 | number/string | No | All | yes | +| `edgeHeight` | Edge/Corner's height. Default: 20 | number/string | No | All | yes | + +### Style Props + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :--- | :--- | :--- | :--- | :--- | :--- | +| `edgeColor` | Use this to give custom color to edges. Default: #FFF | string | No | All | yes | +| `edgeBorderWidth` | Use this to modify the border (thickness) of edges. Default: 4 | number/string | No | All | yes | +| `edgeRadius` | Use this to modify the border radius of edges. Default: 0 | number | No | All | yes | +| `backgroundColor` | Use this to modify the background color of area around finder. Default: rgb(0, 0, 0, 0.6) | string | No | All | yes | +| `outerMaskOpacity` | Use this to modify the transparency of outer mask. Default: 0.6 | number | No | All | yes | + +### Animation Props + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :--- | :--- | :--- | :--- | :--- | :--- | +| `showAnimatedLine` | Whether to show animated scanning line. Default: true | boolean | No | All | yes | +| `animatedLineColor` | Color of the animated scanning line. Default: #FFF | string | No | All | yes | +| `animatedLineHeight` | Height of the animated scanning line. Default: 2 | number | No | All | yes | +| `animatedLineWidth` | Width of the animated scanning line. Default: 85% | number/string | No | All | yes | +| `lineAnimationDuration` | Duration of the scanning line animation in milliseconds. Default: 1500 | number | No | All | yes | +| `animatedLineOrientation` | Orientation of the scanning line animation (horizontal/vertical). Default: horizontal | string | No | All | yes | +| `useNativeDriver` | Whether to use native driver for animations. Default: true | boolean | No | All | yes | + +### Callback Props + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :--- | :--- | :--- | :--- | :--- | :--- | +| `onLayoutMeasured` | Handler to receive onLayout event of finder. Useful if you want to only detect barcode inside the Finder area | function | No | All | yes | + + + +## Known Issues + +## Others + +## License +This project is licensed under [The MIT License (MIT)](https://github.com/shahnawaz/react-native-barcode-mask/blob/master/LICENSE). \ No newline at end of file diff --git a/zh-cn/react-native-barcode-mask.md b/zh-cn/react-native-barcode-mask.md new file mode 100644 index 0000000000000000000000000000000000000000..394652d4dbfa604f0c800ff65f6b6c2fec03d241 --- /dev/null +++ b/zh-cn/react-native-barcode-mask.md @@ -0,0 +1,195 @@ +> 模板版本:v0.2.2 + +

+

react-native-barcode-mask

+

+

+ + Supported platforms + + + License + +

+ +> [!Tip] [Github 地址](https://github.com/shahnawaz/react-native-barcode-mask) + +## 安装与使用 + +进入到工程目录并输入以下命令: + + + +#### **npm** + +```bash +npm install react-native-barcode-mask +``` + +#### **yarn** + +```bash +yarn add react-native-barcode-mask +``` + + + +### 示例 + +下面的代码展示了这个库与相机组件结合的使用场景: + +> [!WARNING] 使用时 import 的库名不变。 + +```javascript +import React, { useState, useEffect } from 'react'; +import { StyleSheet, View, Text } from 'react-native'; +import BarcodeMask from 'react-native-barcode-mask'; +import { Camera, useCameraDevice, useCameraPermission } from 'react-native-vision-camera'; + +export default function SimplifiedScannerDemo() { + const [layoutInfo, setLayoutInfo] = useState(null); + + // Vision Camera Hooks + const device = useCameraDevice('back'); + const { hasPermission, requestPermission } = useCameraPermission(); + + useEffect(() => { + if (!hasPermission) { + requestPermission(); + } + }, [hasPermission, requestPermission]); + + // BarcodeMask 测量完成后的回调函数 + const handleLayoutMeasured = ({ nativeEvent }) => { + if (!layoutInfo) { + setLayoutInfo(nativeEvent.layout); + } + }; + + if (!device) { + return 未找到相机设备; + } + + if (!hasPermission) { + return null; + } + + return ( + + {/* 动态定位的相机裁剪窗口 */} + {layoutInfo && ( + + + + )} + + {/* 扫码框遮罩 */} + + + ); +} + +// 样式表 +const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: 'black', + }, + infoText: { + color: 'white', + fontSize: 16, + textAlign: 'center', + }, + cameraClip: { + position: 'absolute', + overflow: 'hidden', + }, +}); +``` + +提示:需配置平台相机权限;确保遮罩层在上方;如需仅显示框内相机画面,可用 onLayoutMeasured 返回坐标裁剪 Camera 容器。 + +## 约束与限制 + +### 兼容性 + +要使用此库,需要使用正确的 React-Native 和 RNOH 版本。另外,还需要使用配套的 DevEco Studio 和 手机 ROM。 + +本文档内容基于以下版本验证通过: + +react-native-harmony:0.72.86; SDK:HarmonyOS 5.1.0.125; IDE:DevEco Studio 5.1.0.849; ROM:5.0.0.150; + +react-native-harmony:0.77.18; SDK:HarmonyOS 5.1.0.125; IDE:DevEco Studio 5.1.0.849; ROM:5.0.0.150; + +## 属性 + +> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性;no 则表示不支持;partially 表示部分支持。使用方法跨平台一致,效果对标 iOS 或 Android 的效果。 + +### 尺寸属性 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :--- | :--- | :--- | :--- | :--- | :--- | +| `width` | 取景器的宽度(可见区域)。默认值:280 | number/string | No | All | yes | +| `height` | 取景器的高度(可见区域)。默认值:230 | number/string | No | All | yes | +| `edgeWidth` | 边/角的宽度。默认值:20 | number/string | No | All | yes | +| `edgeHeight` | 边/角的高度。默认值:20 | number/string | No | All | yes | + +### 样式属性 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :--- | :--- | :--- | :--- | :--- | :--- | +| `edgeColor` | 用于为边缘设置自定义颜色。默认值:#FFF | string | No | All | yes | +| `edgeBorderWidth` | 用于修改边缘的边框(厚度)。默认值:4 | number/string | No | All | yes | +| `edgeRadius` | 用于修改边缘的边框圆角。默认值:0 | number | No | All | yes | +| `backgroundColor` | 用于修改取景器周围区域的背景颜色。默认值:rgb(0, 0, 0, 0.6) | string | No | All | yes | +| `outerMaskOpacity` | 用于修改外部遮罩的透明度。默认值:0.6 | number | No | All | yes | + +### 动画属性 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :--- | :--- | :--- | :--- | :--- | :--- | +| `showAnimatedLine` | 是否显示动画扫描线。默认值:true | boolean | No | All | yes | +| `animatedLineColor` | 动画扫描线的颜色。默认值:#FFF | string | No | All | yes | +| `animatedLineHeight` | 动画扫描线的高度。默认值:2 | number | No | All | yes | +| `animatedLineWidth` | 动画扫描线的宽度。默认值:85% | number/string | No | All | yes | +| `lineAnimationDuration` | 扫描线动画的持续时间(毫秒)。默认值:1500 | number | No | All | yes | +| `animatedLineOrientation` | 扫描线动画的方向(水平/垂直)。默认值:horizontal | string | No | All | yes | +| `useNativeDriver` | 是否为动画使用原生驱动。默认值:true | boolean | No | All | yes | + +### 回调函数 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :--- | :--- | :--- | :--- | :--- | :--- | +| `onLayoutMeasured` | 用于接收取景器 onLayout 事件的处理程序。 | function | No | All | yes | + + + +## 遗留问题 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/shahnawaz/react-native-barcode-mask/blob/master/LICENSE) ,请自由地享受和参与开源。 \ No newline at end of file