使用 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 指向远程 图像，它将自动下载。如果图像不能 加载/下载，失败回调将被调用。

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

我没用过，但如果我是你，我会先试试 Image Editor，因为除了导入之外你不需要任何额外的安装。