使用 react-native 裁剪图像

Crop image with react-native

你好世界,

我正在尝试像 React-native Doc

上的解释那样裁剪图像
<Image source={{uri: this.props.image, crop: {left: 50, top: 50, width: 100, height: 100}}} style={{height: 100, width: 100}}/>

但是图像没有被裁剪,这是行不通的。

有什么想法吗?

来自文档:

On the infrastructure side, the reason is that it allows us to attach metadata to this object. For example if you are using require('./my-icon.png'), then we add information about its actual location and size (don't rely on this fact, it might change in the future!). This is also future proofing, for example we may want to support sprites at some point, instead of outputting {uri: ...}, we can output {uri: ..., crop: {left: 10, top: 50, width: 20, height: 40}} and transparently support spriting on all the existing call sites.

React Native Image 当前不支持图像裁剪,至少不是您指出的方式,但是您仍然有其他选项可以完成相同的工作。

  1. ImageEditor: React Native Component,再次来自文档:

Crop the image specified by the URI param. If URI points to a remote image, it will be downloaded automatically. If the image cannot be loaded/downloaded, the failure callback will be called.

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

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