React NativeでiOS用の17デバイス判定処理を作る【2018年2月版】

はじめに

スマホアプリ開発において大変なのが、各OSやデバイスに対応することです。
特に新機種などで大きくサイズが異なった場合に、表示されてほしいところが表示されなかったり、見切れてしまうなど問題が発生することがあります。
React Nativeでは%やFlexなど相対値を使用することでこの問題は起きにくいですが、どうしても絶対値を指定したい場面は出てきます。
そんなときには、各デバイス毎の判定処理を行うと便利なので、ご紹介していきます。

iOSの判定メソッド

Androidはデバイスが有りすぎる為、ここではiOSのデバイス別判定処理をご紹介します。

判定処理の考え方

まず、こういった判定処理はどのような形式が良いか考えてみます。
これはiPhoneXですか？のように真偽値を返してくれる形式が良さそうですね。
また、React Nativeにおいては共通コンポーネント化してしまい、そちらを必要なコンポーネントでimportし使用する形が良さそうですね。
例えばisIPhoneXのような名前だとわかりやすそうです。
汎用的なコンポーネントということでlib配下などにwindowsize.js などの名前で格納しておくのも良いかもしれません。

また以前の記事にも解説した、const { width, height } = Dimensions.get('window'); のような形で高さや幅が取得できます。

レイアウトを整える【これからはじめるReact Native】

では、一気にiOSの17デバイス向け判定コンポーネントをご紹介していきます！

コンポーネント

lib/windowsize.js

import { Platform, Dimensions } from 'react-native';

const X_WIDTH = 375;
const X_HEIGHT = 812;
const EIGHT_PLUS_WIDTH = 414;
const EIGHT_PLUS_HEIGHT = 736;
const EIGHT_WIDTH = 375;
const EIGHT_HEIGHT = 667;
const SE_WIDTH = 320;
const SE_HEIGHT = 568;
const IPAD_PRO_129_WIDTH = 1024;
const IPAD_PRO_129_HEIGHT = 1366;
const IPAD_PRO_105_WIDTH = 1112;
const IPAD_PRO_105_HEIGHT = 834;
const IPAD_PRO_97_WIDTH = 768;
const IPAD_PRO_97_HEIGHT = 1024;


// iPhone X対応
export const isIPhoneX = () => {
  const { width, height } = Dimensions.get('window');
  return (
      Platform.OS === 'ios' &&
      (width === X_WIDTH && height === X_HEIGHT)
  );
}

// iPhone 8 Plus対応
export const isIPhoneEightPlus = () => {
  const { width, height } = Dimensions.get('window');
  return (
      Platform.OS === 'ios' &&
      (width === EIGHT_PLUS_WIDTH && height === EIGHT_PLUS_HEIGHT)
  );
}

// iPhone 8対応（iPhone 6s Plus、iPhone 6 Plus、iPhone 7、
//              iPhone 6s、iPhone 6）
export const isIPhoneEight = () => {
  const { width, height } = Dimensions.get('window');
  return (
      Platform.OS === 'ios' &&
      (width === EIGHT_WIDTH && height === EIGHT_HEIGHT)
  );
}

// iPhone SE対応
export const isIPhoneSe = () => {
  const { width, height } = Dimensions.get('window');
  return (
      Platform.OS === 'ios' &&
      (width === SE_WIDTH && height === SE_HEIGHT)
  );
}

// iPad Pro 12.9-inch対応
export const isIPadPro129 = () => {
  const { width, height } = Dimensions.get('window');
  return (
      Platform.OS === 'ios' &&
      (width === IPAD_PRO_129_WIDTH && height === IPAD_PRO_129_HEIGHT)
  );
}

// iPad Pro 10.5-inch対応
export const isIPadPro105 = () => {
  const { width, height } = Dimensions.get('window');
  return (
      Platform.OS === 'ios' &&
      (width === IPAD_PRO_105_WIDTH && height === IPAD_PRO_105_HEIGHT)
  );
}

// iPad Pro (9.7-inch)対応（iPad Air 2、iPad Mini 4）
export const isIPadPro97 = () => {
  const { width, height } = Dimensions.get('window');
  return (
      Platform.OS === 'ios' &&
      (width === IPAD_PRO_97_WIDTH && height === IPAD_PRO_97_HEIGHT)
  );
}

使い方

import { isIPhoneX } from '../lib/windowsize';
使いたいところでimportをします。

そしてこのように三項演算子などでスタイルやJSロジック部分までbooleanで返ってくるメソッドなのでどこでも使えそうですね。
height: isIPhoneX() ? 40 : 20

OSやデバイスを特定する

ちなみに、OSの特定はPlatform.OSで判定できます。
import { Platform } from 'react-native';
こちらでPlatformをインポートした後、Platform でデバイス情報を取得することができます。
Platform.OS === 'ios' や !Platform.isPad といった具合です。
また、Platform.Version === 25 と記述することでAndroidのバージョンを判定することが可能です。

SafeAreaView

iPhone X用にはSafeAreaViewというコンポーネントを使用することができます。
公式リポジトリ
React Nativeのバージョン0.50.0以上が対象となりますが、iPhone X 用のセーフエリア対応がこのコンポーネントを使用することだけで実現可能です。（デバイス上部の出っ張っているエリアなどにかからないように対応）

まとめ

このようにデバイスサイズをまとめて共通ライブラリとすることで、判定がとてもやりやすくなります。
気をつけていただきたいのが、OSも判定条件につけないとAndroidで同サイズの機種が出てきたときに意図せぬ動きをすることがあります。（意図してiOSだけの判定の場合）
最新のサイズが異なるデバイスが発売されたら、都度こちらの記事は更新していきます。