2017-09-15 11 views
2

写真アルバムを作成しています。ネイティブモバイルアプリに反応します。 ワイド画像(1)の一部である正方形の画像を画像(2)として表示したいので、Instagramのようなイメージの一部をReact Nativeに表示しますか?

質問あり、React Nativeで画像の中央を適切にズームするにはどうすればよいですか? StyleSheet(CSS)でそれを行うことはできますか?または、ライブラリはありますか?

画像(1) - 2048×1152ピクセルPX enter image description here

画像(2) - ×1080ピクセル1080ピクセル

enter image description here

答えて

3

Image成分resizeModeプロパティに見て。それはあなたのために働くはずです。

https://facebook.github.io/react-native/docs/image.html#resizemode

それはフレームが原画像の大きさと一致しない場合、画像のサイズを変更する方法を決定します。

  • カバー:一様に画像を拡大縮小画像の両方の次元(幅と高さ)がビューの対応する寸法以上になるように(画像の縦横比を維持する)(マイナスパディング)。画像の両方の次元(幅と高さ)は図(マイナスパディング)の対応する寸法以下となるように均一に画像をスケール(画像の縦横比を維持する):

  • を含みます。

  • 伸縮:幅と高さを独立に調整することで、srcの縦横比が変更されることがあります。

  • :ビューのフレームをカバーするためにイメージを繰り返します。イメージはサイズとアスペクト比を維持します。 (iOS版のみ)

例えば、これを試してみてください:

<Image style={{width: 100, height: 100}} resizeMode="cover" /> 
+0

は、あなたが(それはこの問題に似ています)この問題を解決するためでした:https://stackoverflow.com/questions/47362222/showing-specific画像の一部をレンダリングするもの –

関連する問題