react-native - 使用 react-native 裁剪图像

Question

你好世界，

我试图裁剪图像，如React-native Doc上的解释

<Image source={{uri: this.props.image, crop: {left: 50, top: 50, width: 100, height: 100}}} style={{height: 100, width: 100}}/>

但它不起作用，图像没有被裁剪。

任何想法？

Answer 1

从文档：

在基础架构方面，原因是它允许我们将元数据附加到该对象。例如，如果您使用 require('./my-icon.png')，那么我们会添加有关其实际位置和大小的信息（不要依赖这个事实，它可能会在未来发生变化！）。这也是未来的证明，例如我们可能希望在某些时候支持精灵，而不是输出 {uri: ...}，我们可以输出 {uri: ...,crop: {left: 10, top: 50, width: 20, height: 40}} 并且透明地支持所有现有呼叫站点上的精灵。

React Native Image 目前不支持图像裁剪，至少不是你指出的方式，但是你仍然有其他选项可以做同样的工作。

1. ImageEditor：React Native Component，同样来自文档：

裁剪由 URI 参数指定的图像。如果 URI 指向远程图像，它将自动下载。如果图像无法加载/下载，将调用失败回调。

2. 裁剪不需要链接。
3. Image Crop Picker另一个提供裁剪的软件包，但方式不同：Picking。需要链接，但幸运的是它还支持 RN 版本 > 0.40。

我没有使用过任何一个，但如果我是你，我会首先尝试图像编辑器，因为除了导入之外你不需要任何额外的安装。