web-dev-qa-db-ja.com

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}}/>

しかし、それは機能しません。画像はトリミングされません。

何か案が？

react-nativecropreact-native-androidreact-native-iosreact-native-image
4
G Clovs

ドキュメントから：

インフラストラクチャ側では、このオブジェクトにメタデータを添付できるためです。たとえば、require（ './ my-icon.png'）を使用している場合は、実際の場所とサイズに関する情報を追加します（この事実に依存しないでください。将来、変更される可能性があります）。これは将来の保証でもあります。たとえば、{uri：...}を出力する代わりに、ある時点でスプライトをサポートしたい場合は、{uri：...、crop：{left：10、top：50、幅：20、高さ：40}}であり、既存のすべての通話サイトでのスプライトを透過的にサポートします。

React Native Imageは現在、少なくともあなたが指摘した方法では、画像のトリミングをサポートしていませんが、同じ仕事をする他のオプションがまだあります。

  1. ImageEditor ：React Native Component、再びドキュメントから：

URIパラメータで指定された画像を切り抜きます。 URIがリモートイメージを指している場合、それは自動的にダウンロードされます。イメージをロード/ダウンロードできない場合は、失敗コールバックが呼び出されます。

  1. トリミング リンクは必要ありません。
  2. Image Crop Picker トリミングを提供する別のパッケージですが、方法が異なります：ピッキング。リンクが必要ですが、ありがたいことに、0.40を超えるRNバージョンもサポートしています。

私はそれらのどれも使用していませんが、私があなたなら、インポートする以外に追加のインストールは必要ないので、最初にImageEditorを試してみます。

11
eden