2018年3月5日
プログラミング
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');
のような形で高さや幅が取得できます。
では、一気に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だけの判定の場合)
最新のサイズが異なるデバイスが発売されたら、都度こちらの記事は更新していきます。
React Nativeのお仕事に関するご相談
Bageleeの運営会社、palanではReact Nativeに関するお仕事のご相談を無料で承っております。
zoomなどのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
ぜひお気軽にご相談ください。
この記事は
参考になりましたか?
0
0
関連記事

2021年8月30日
React Navigation 6.0のStack Navigatorの大きく変わった箇所の変更点をまとめてみた

2021年1月4日
react-native-svgを使ってReact NativeでSVGを扱う

2019年12月23日
Expo Bare Workflow で Firebase Analytics を設定する

2018年12月6日
【React Native】キーボードで画面が隠れる場合の対処法

2018年7月13日
TypeScriptでReact Native開発をする方法2018年最新版

2018年6月29日
React Navigationのタブナビゲーションをカスタマイズしてみよう!
簡単に自分で作れるWebAR
「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。
palanARへ
palanでは一緒に働く仲間を募集しています
正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。
運営メンバー

Eishi Saito 総務
SIerやスタートアップ、フリーランスを経て2016年11月にpalan(旧eishis)を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。
sasakki デザイナー
アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

やまかわたかし デザイナー
フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReactやReact Nativeをよく触っています。
Sayaka Osanai デザイナー
Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた エンジニア
サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

こぼり ともろう エンジニア
サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

ささい エンジニア
フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

Damien
WebAR/VRの企画・開発をやっています。森に住んでいます。

ゲスト bagelee

かっきー

まりな

suzuki
miyagi

ogawa
雑食デザイナー。UI/UXデザインやコーディング、時々フロントエンドやってます。最近はARも。

いわもと
デザイナーをしています。 好きな食べ物はラーメンです。

taishi kobari
フロントエンドの開発を主に担当してます。Blitz.js好きです。

kubota shogo
サーバーサイドエンジニア。Ruby on Railsを使った開発を行いつつ月500kmほど走っています!
nishi tomoya

aihara
グラフィックデザイナーから、フロントエンドエンジニアになりました。最近はWebAR/VRの開発や、Blender、Unityを触っています。モノづくりとワンコが好きです。
nagao
SIerを経てアプリのエンジニアに。xR業界に興味があり、unityを使って開発をしたりしています。

Kainuma
サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

sugimoto
asama
ando
iwasawa ayane

oshimo
異業界からやってきたデザイナー。 palanARのUIをメインに担当してます。 これからたくさん吸収していきます!