はじめに
アプリ開発では端末の解像度に応じて画像リソースを出し分けることができ、Androidだとdpiごとにフォルダを分ける、iOSだとファイル名に"@2x"などのSuffixをつけて対応します。
React Nativeではどのように出し分けるのか調べてみました。
React Nativeのドキュメントを見てみる
公式ドキュメントを調べてみると、iOSと同様に"@2x"、"@3x"で指定すれば良いことがわかります。
You can also use the @2x and @3x suffixes to provide images for different screen densities.
(引用元 : https://facebook.github.io/react-native/docs/images.html)
iOSではネイティブと同じように使えそうです。ここではさらに、Androidの各dpiではどうなるのか、@2x,@3x以外の場合はどうなるのかも調べてみました。
調べ方
以下のように@2x, @3xと書かれた画像に、それぞれ対応するファイル名をつけて、各解像度のAndroidエミュレータで、それぞれどの画像が読み込まれるか調べてみました。
xxxdpiの4倍を想定して@1x〜@4xを用意、加えて@0.75xや@1.5xの小数点込みのサイズも試しました。
結果
mdpiで@1x, xxxdpiで@4xと、順当に画像が読み込まれました。
また、ldpiで@0.75x、hdpiで@1.5xと小数点込みでも問題なく適用されました。
例) hdpi端末に@1.5xの画像が表示された
早見表
まとめると、画像ファイル名のSuffix(@Nx)とAndroid端末の解像度/iOS端末(実例としてiPhone)は以下のように対応付けられます。
| Suffix | Android | iOS |
|---|---|---|
| @0.5x | ldpi | - |
| @1x | mdpi | iPhone,3G,3GS |
| @1.5x | hdpi | - |
| @2x | xhdpi | iPhone 4,4S,5,5s,5c,SE,6,6s,7,8 |
| @3x | xxhdpi | iPhone 6 Plus,7 Plus,8 Plus, X |
| @4x | xxxhdpi | - |
おわりに
React Nativeで画像のファイル名に指定する@NxはAndroidでも倍率に応じて適切に読み込まれることを確認できました。