React Nativeにおけるimageコンポーネントの「resizeMode」の挙動

React Native

Expo

タイトルのとおりですが、React Nativeのimage関連コンポーネントに設定するstyleプロパティ「resizeMode」の挙動を確認してまとめました。

画像を設定したときのリサイズのルールを設定できます。画像のアスペクト比を維持したり要素にピッタリ合うようにリサイズしたりなど、さまざまな設定ができるはずです。ややこしくなりがちなので勉強も兼ねて一度整理してみました。

基本的な挙動はcssのbackground-imageに一致することが期待されます。実際の挙動が本当にそうなるのか試してみました。

結論を先に言うと

同じ属性値であれば基本的にWebと同じと考えて良さそうです。以下に値ごとの挙動をまとめています。

ドキュメント

https://docs.expo.io/versions/v36.0.0/react-native/image/

概要

以下の値が定義されています。コンポーネントによっては利用できないものもあるので注意しましょう。

cover
contain
stretch
repeat
center

cover

デフォルトは大体これになっている。ドキュメントでは以下の記載。

cover: Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding).

画像の縦横比は維持する。
画像のサイズがコンポーネントのサイズ以上になるよう画像を広げる。

かならずコンポーネント全体が画像に埋められるはず。画像が小さければ縦も横も埋められるようにリサイズされる。
リサイズするときは縦横比を維持する。

contain

ドキュメントでは以下

contain: Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding).

画像の縦横比は維持する。
画像のサイズがコンポーネントのサイズに収まるよう画像を縮める。

かならず画像がコンポネント内に収まるはず。画像の全体が見えているはず。画像が大きければ縦も横も収まるようにリサイズ。
リサイズするときは縦横比を維持する。

stretch

stretch: Scale width and height independently, This may change the aspect ratio of the src.

画像の縦横比は維持しない
縦と横をそれぞれコンポーネントに合わせて、画像をリサイズする

画像がコンポーネントの大きさと一致するようにリサイズされ全体を埋めているはず。画像の全体が見えているが、変形しているかも。
リサイズのときに縦横比を維持しない。

repeat

repeat: Repeat the image to cover the frame of the view. The image will keep its size and aspect ratio, unless it is larger than the view, in which case it will be scaled down uniformly so that it is contained in the view.

コンポーネントを埋めるように画像を繰り返す
小さい画像であれば縦横比とサイズは元画像のまま
大きい画像の場合は縦横比を維持してリサイズ

コンポーネントを埋め尽くすように画像を繰り返す。コンポーネントは画像で埋められるはず。
画像の縦横比は維持される。

繰り返す回数に上限がある？リサイズのルールにコンポーネントのサイズによる拡大比率のルールがあるようでしたが、あまりわかりませんでした。 repeatを使う機会は少ないですのでそれほど問題ないですが、わかったら追記しておきます。

center

center: Center the image in the view along both dimensions. If the image is larger than the view, scale it down uniformly so that it is contained in the view.[