用反应原生的作物图像

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'),那么我们会添加有关其实际位置和大小的信息(不要依赖于这个事实,它可能在将来发生变化!).这也是未来的证明,例如我们可能希望在某些时候支持sprite,而不是输出{uri:...},我们可以输出{uri:...,crop:{left:10,top:50, width:20,height:40}}并透明地支持所有现有呼叫站点上的spriting.

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

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

裁剪URI参数指定的图像.如果URI指向远程图像,则会自动下载.如果无法加载/下载映像,则将调用失败回调.

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

我没有使用它们,但如果我是你,我会首先尝试使用Image Editor,因为除了导入之外你不需要任何额外的安装.