在移动应用开发中，常会有需求将纸质文件转换为电子档案，以提高文件的管理、存储和共享效率。而 react-native-document-scanner 就是一款基于 React Native 的 npm 包，可用于在移动 App 中实现文档扫描并转换为 PDF、JPG 等格式。
安装
在项目的根目录下，使用以下命令安装 react-native-document-scanner：
npm install react-native-document-scanner --save
使用
使用 react-native-document-scanner 进行文档扫描主要分为以下几步：
- 导入 DocumentScanner 组件：
import { DocumentScanner } from 'react-native-document-scanner';- 在 render() 中使用 DocumentScanner 组件，并为其设置 props：
<DocumentScanner
ref={scannerRef}
onPictureTaken={handlePictureTaken}
...
/>其中，scannerRef 用于获取 DocumentScanner 实例，handlePictureTaken 为自定义回调函数，用于处理扫描后的图片。
- 在回调函数 handlePictureTaken 中，获取扫描后的图片信息，并进行相应处理：
const handlePictureTaken = (data) => {
const { croppedImage, initialImage, rectangleCoordinates } = data;
// 处理图片信息
};其中，data 包含以下三个属性：
croppedImage：裁剪后的图片信息；initialImage：扫描时原始图片的信息；rectangleCoordinates：扫描区域的坐标信息。
- 可以通过改变 DocumentScanner 组件的 props，来实现相应的功能：
captureMultiple：是否支持多张图片扫描，默认为 false；saveInAppDocument：是否保存扫描后的文件到 App 内置文档；useBase64：是否以 Base64 格式输出图片内容。
示例代码
以下是基于 react-native-document-scanner 实现的简单示例代码：
-- -------------------- ---- -------
------ ------ - ------ - ---- --------
------ - ----- ------ ----------- ------ - ---- ---------------
------ - --------------- - ---- --------------------------------
----- ------ - -------------------
----------------- -
----- --
--
------------- -
----- --
--
---
----- ------------- - -- -- -
----- ---------- - -------------
----- -------------- ---------------- - ---------------
----- ------------------ - ------ -- -
----- - ------------ - - -----
------------------------------
--
----- --------------- - -- -- -
-----------------------------
--
------ -
----- --------------------------------
----------------
----------------
-----------------------------------
-----------------------
--
------------- -- ------ --------------------------- --------- ---- ------------ -- ---
------- ------------ ------------------------- --
-------
--
--
------ ------- --------------通过该代码示例，可以了解如何使用 react-native-document-scanner 完成文档扫描，并将结果展示在移动 App 中。同时，react-native-document-scanner 的其他用法也可以在源码中找到。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600566b381e8991b448e2f89