はじめに
React NativeではComponentのサイズを指定する際に以下のように単位無しで指定します。
{
width: 100,
height: 100,
}
基本的に、Androidは"dp(dip)", iOSは"ポイント"をサイズの単位としますが、React Nativeで指定した値がどう扱われるのかを調べてみました。
React Nativeのドキュメントを見てみる
公式のドキュメントには以下のように書かれています。
All dimensions in React Native are unitless, and represent density-independent pixels.
(引用元: https://facebook.github.io/react-native/docs/height-and-width.html)
density-independent pixelsとあるので、単なるピクセル数ではなくデバイス密度非依存ピクセルであることがわかります。
よしなにdp、ポイントに置き換えられそうな気もしますが、一応実際に動作させて確認してみます。
Android端末で見てみる
幅360dpのAndroid端末にJavaScript上で一辺"72"の正方形を並べたのがこちらです。
72 * 5 = 360で、幅360dpの端末にぴったりに収まってるのがわかります。
React Nativeで指定した値はそのままdpに置き換えられるようです。
iOS端末で見てみる
つづけて、iOS端末です。
こちらは、幅375ポイントの端末にJavaScript上で一辺"75"の矩形を並べています。
75 * 5 = 375で、幅375ポイントの端末にぴったり収まっています。
iOSはポイントに置き換えられるようです。
余談 : フォントサイズ
Textのフォントサイズはデフォルトではシステムの設定によって拡縮するようになっています。
(Androidでいうsp)
固定したい場合は、allowFontScalingプロパティをfalseにしておきましょう。
おわりに
React Nativeで指定するサイズは、Androidの"dp"、iOSの"ポイント"にそれぞれ置き換えられることを確認できました。