Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
19
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

@mogamin3

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

最近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の設定によって変えることができます。詳しくは、前提セクションにあるブログ記事をご覧ください。)

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
19
Help us understand the problem. What are the problem?