如何在 React Native 中裁剪图像，使其看起来像圆形而不是矩形？答案

【问题标题】：How to crop images in React Native, so that it'll be like a circular shape instead of rectangle one?如何在 React Native 中裁剪图像，使其看起来像圆形而不是矩形？
【发布时间】：2019-10-29 15:36:22
【问题描述】：

我确实有一些图片，我需要将它们裁剪成圆形，然后才能在 React Native 中使用它们以用作 react-viro（渲染 360Images 的库）中的 ViroImage。

我无法对图片应用太多样式，borderRadius 似乎无法解决我的问题。

【问题讨论】：

标签： javascript react-native image-processing

【解决方案1】：

创建一个边框半径 = 30 的容器，然后将图像放入其中

【讨论】：

【解决方案2】：

当我不得不在客户端处理图像并且找不到任何值得使用的东西时，我创建了react-native-image-tools-wm 库。试试看。

例子：

const image = Image.resolveAssetSource(require('./my-image.jpg)).uri;
const maskImage = Image.resolveAssetSource(require('./mask-image.png)).uri;

RNImageTools.mask(image, maskImage).then(({ uri, width, height }) => {
    // Sync with your app state
});

请注意，您的蒙版图像在 iOS 上应为白底黑字，在 Android 上应为黑底白字。黑色部分将替换为您的图像，白色/透明将变为透明。您可以在名称上使用 .android 和 .ios 后缀，RN 将有条件地加载它们。

您也可以使用createMaskFromShape 方法创建蒙版，但您必须自己生成形状点。

【讨论】：