【React Native】デバイス画面幅を取得してレスポンシブ対応する方法
本記事の内容
  • レスポンシブ対応の方法
  • デバイスの画面幅を取得する方法
  • 各デバイスによる判定条件

のやり方について解説した記事になっています。

1. Dimensionsコンポーネント

“reactnativeライブラリのDimensionsコンポーネント”“getメソッド”を用いることで、デバイスの画面幅の情報を取得することができます。

1.1 実装

サンプルコード 結果

1.2 使い方

デバイスの画面幅の取得方法


Dimensions.get(‘window’).width デバイスの幅を取得
Dimensions.get(‘window’).height デバイスの高さを取得

レスポンシブ対応

取得したデバイス情報を使ってレスポンシブ対応する。
下記のように各それぞれのスタイルに設定すれば、デバイスに合った幅や高さ、フォントサイズを設定することができます

・デバイス毎にサイズを変えることができる
width: iPhoneWidth/2,
height: iPhoneHeight/4,
fontSize: iPhoneHeight/30,

このようにして、各デバイスに合ったのサイズに調整して(レスポンシブ対応)アプリを作っていきます。

2. 各デバイスによる判定条件

デバイス毎によって処理を変えたい時があると思います。
各デバイスの画面幅、高さは決まっているので、「取得した画面幅」と「条件判定で設定した画面幅」が同一なら”true”と言う処理を書くことでデバイス毎によって処理を変えることができます。

今回は、App.jsファイルの他にiPhoneSize.jsファイルを作成します。

2.1 実装

サンプルコード
iPhoneSize.js App.js 結果
iPhone8

iPhone11ProMax

iPhone8Plus

2.2 使い方

iPhoneSize.js

iPhoneSize.jsファイルには、各デバイスの判定条件コードが書いてあります。

例えば、Dimensions.get(‘window’)で取得した値(ユーザーが使用しているデバイス)が
windth=375, height=667
の場合、iPhoneInch47コンポーネントのみ返り値がtrueになリます。
他は、全て返り値がfalseになる。

あとは、このiPhoneSize.jsファイルの呼び出し先(App.js)で
「iPhoneInch47コンポーネント」がtrueの時の処理を書けば、デバイス毎によって処理を変えることができます。

App.js

App.jsファイルでiPhoneSize.jsファイルをインポートします。
三項演算子
三項演算子を使って、デバイス毎による処理を実装します。
三項演算子は、下記の画像のように

「条件 ? 条件がtrue時の処理 : 条件がfalse時の処理」

のようにソースコードを書きます。

3. まとめ

レスポンシブ対応を怠るとデバイスによってレイアウトが崩れてしまいますので、気をつけましょう! また、本記事の最後に紹介した三項演算子は、よく使う処理ですので、とてもお勧めです。