Help us understand the problem. What is going on with this article?

React NativeのOS別 height/widthの挙動解説

More than 1 year has passed since last update.

最近React Nativeに触り始め、OSごとに異なる画面やコンポーネントのheight/widthの挙動にやや苦しんだので、調べたことをまとめました。

バージョン

React Native v0.58

前提

これから解説で使用する単語の定義は以下の通りです。

Window height / Window width

React Native標準のDimensionsを使用し、以下のようなコードで取得できる値を指します。

import {Dimensions} from 'react-native';
Dimensions.get('window').width; // Window width
Dimensions.get('window').height; // Window height

Screen height / Screen width

React Native標準のDimensionsを使用し、以下のようなコードで取得できる値を指します。

import {Dimensions} from 'react-native';
Dimensions.get('screen').width; // Screen width
Dimensions.get('screen').height; // Screen height

また、キーボード周りの挙動は、Androidの場合、AndroidManifest.xmlの設定値によって変化します。今回は設定を変更していないことを前提としています。詳しくは私のブログにあるので、興味があればご覧ください。

【ReactNative】AndroidとiOSではキーボードが開いた時の挙動が違う - ゆるふわ技術日誌

iOS

iOSの仕様は割と単純です。

iOS.png

width/height共に、ScreenとWindowは同じ値を指します。

また、StatusBar.currentHeightを使用しても、StatusBarの高さを取得することはできません。

x = 0, y = 0の位置も画像上のOriginと書かれている位置になるので、適宜StatusBarを避ける処理をしてあげる必要があります。

そして、図のピンクで塗ってある領域は、styleporpsに{flex: 1}を渡した場合のコンポーネントの領域を表しています。こちらもキーボードが展開しても変わらないため、キーボードに隠れないように、コンポーネントを配置したい場合には、そのようなライブラリを使うなり、自分でイベントハンドラを設定してやって、うまいことやってあげる必要があります。

Android

曲者なのがAndroidです。

Android.png

(SketchにAndroid用のパーツがなかったので図がお粗末ですが、なんとなく察してください。下の黒い領域はホームボタンや戻るボタンが出ている、あの領域です。察してください:bow:)

こちらはiOSとは異なり、WindowとScreenのheightが別の値を指します。

端的にまとめると、

  • Screen heightは、物理的な画面の高さ
  • Window heightは、ホームボタンのある領域を除いた画面の高さ

を返します。

そして、Androidでは、StatusBar.currentHeightが値を返します。また、この値は、StatusBarを非表示にしている場合でも返ります。

また、StatusBarが表示されている場合、x = 0, y = 0の位置は、画像上のOriginの位置になります。(非表示の場合は、物理的な画面の一番左上になります)
そのため、特にStatusBarを避けるような処理を自分で書く必要はありません。

最後に、{flex: 1}を指定した際の領域(画像上ピンクの塗りつぶし)ですが、Androidはキーボードを避けるように領域が縮みます。
そのため、キーボードを避ける処理を書く必要はありませんが、領域の大きさが変わっても表示が崩れないようなstyleを書いてあげる必要があると言えます。
(繰り返しになりますが、この挙動はAndroidManifest.xmlの設定によって変えることができます。詳しくは、前提セクションにあるブログ記事をご覧ください。)

mogamin3
fringe81
Fringeは、最新のテクノロジーとプロフェッショナルによるサービスにより、社会課題に仮説を立てて市場に広げていくことで、数十年という長期的なスパンで価値を生み出し続け、より良い世界を創る集団です。 既存の領域に限らず、時流を読み、仮説を生み出し、テクノロジーの力で優れたサービスを生み出し続けます。
https://www.fringe81.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした