エンジニアとしての市場価値を測りませんか?PR

企業からあなたに合ったオリジナルのスカウトを受け取って、市場価値を測りましょう

23
15

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

React Nativeで扱うサイズの単位について

Posted at

はじめに

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の"ポイント"にそれぞれ置き換えられることを確認できました。

23
15
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up

Comments

No comments

Let's comment your feelings that are more than good

Qiita Advent Calendar is held!

Qiita Advent Calendar is an article posting event where you post articles by filling a calendar 🎅

Some calendars come with gifts and some gifts are drawn from all calendars 👀

Please tie the article to your calendar and let's enjoy Christmas together!

23
15

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Login to continue?

Login or Sign up with social account

Login or Sign up with your email address