在 React Native 开发中，图片裁剪是一个常见需求，在 npm 包中，有许多 React Native 图片裁剪库可供使用。但是，在所有的图像裁剪器中，@ebizon/react-native-advance-image-cropper 是其中一个功能最丰富和最适合定制化的类库。
安装
要安装 @ebizon/react-native-advance-image-cropper , 你可以通过运行以下命令来完成：
npm install @ebizon/react-native-advance-image-cropper
使用
裁剪器属性
首先，让我们看一下 ImageCropper 的属性，以及它们的功能：
| 属性名 | 类型 | 描述 |
|---|---|---|
imageUri |
string |
用于定义当前图像的源 URL 或 URI |
cropAreaWidth |
number |
定义裁剪区域的宽度 |
cropAreaHeight |
number |
定义裁剪区域的高度 |
initialOffsetX |
number |
定义裁剪器水平（x）方向的初始偏移量 |
initialOffsetY |
number |
定义裁剪器垂直方向（y）的初始偏移量 |
minZoom |
number |
用于指定最小变焦水平 |
maxZoom |
number |
用于指定最大变焦水平 |
overlayColor |
string |
定义覆盖在图像上的颜色。默认为 rgba（0，0，0，0.5） |
overlayStrokeWidth |
number |
定义覆盖在图像上的描边宽度。默认为5 |
cropShape |
string |
定义裁剪器的形状。可选值为“矩形”或“圆形”。默认为“矩形”。 |
onTransformDataChange |
function |
当图像被移动，变焦或调整大小时调用的回调函数。这允许你在变换图像操作之前获取对数据的对应。 |
示例代码
这是如何使用 @ebizon/react-native-advance-image-cropper 在 React Native 中进行图片裁剪的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ----- - ---- ---------------
------ ------------ ---- ---------------------------------------------
----- ----------- ------- --------------- -
------------------ -
-------------
---------- - -
--------- ---------------------------
-------------- ----
--------------- ----
--------------- --
--------------- --
-------- --
-------- --
------------- -------- -- -- ------
------------------- --
---------- ------
-
-
-------- -
----- -
---------
--------------
---------------
---------------
---------------
--------
--------
-------------
-------------------
--------- - - -----------
------ -
------
-------------
--------------- ------------- -
---------------- -------------- -
---------- -------- -
---------------- -------------- -
---------------- -------------- -
--------- ------- -
--------- ------- -
-------------- ------------ -
-------------------- ------------------ -
----------- --------- -
----------------------- ---- -- -
------------------
- -
--
-------
--
-
-
------ ------- ------------在 ImageEditor 组件中，我们传递了 ImageCropper 所需的所有属性。此外，我们还添加了 onTransformDataChange 回调函数以在用户操作后获取对数据的修改。
现在，您已经可以从 npm i @ebizon/react-native-advance-image-cropper 中下载 @ebizon/react-native-advance-image-cropper 并使用它来进行图像编辑、调整和裁剪了。这个库非常灵活，可以根据您的特定需求进行调整，同时也提供了详细的文档和示例代码，使您能够更快地上手和了解这个库。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600673dffb81d47349e53c9b