React Native デバイスの縦向き(PORTRAIT)、横向き(LANDSCAPE)の変化を捉える（イベント）

はじめに

React Nativeを初めて１０日ほどが立ちました。画面デザインが難しいですね。
flex layoutを使うと、それなりの画面は出来ますが・・・
ヘッダー(Navigation)とフッター(Menu or Tab)のサイズが 曖昧になり、
時には隠れてしまうケースもあります。

で、どうすりゃいいんだと考えて、今、思いついたのは、
flex layoutを諦めて、固定ピッチで画面デザインをしてやること。
固定ピッチと言っても、デバイスの画面サイズを判定して、
ヘッダーはこの高さ、メインのコンテンツはこの高さ、フッターはこの高さ
というのを計算で求めてやるのが、一番スマートかなという気がしています。

そこで、デバイスの向きが縦向きから横向きに変化、その逆、両方に対応して
どんなロジックを書けばいいか考えてみました。

画面を構成するコンポーネント

だいたいこんなイメージで・・・
index.android.js や index.ios.js で　これらを含んだ Viewを１つレンダリングしてやる
ようなイメージです。

デバイスの向きの変化を捉える

これ、 Viewに onLayoutというイベントがありますので、こいつを使います。
こいつと、Dimensionsから求められるデバイスの画面サイズを組み合わせて、
ヘッダー・フッター・メインコンテンツの高さを計算します。
それを setStateなんかを使って、設定してあげて、画面を再描画すればOKです。

日本語で書くとあっさりしてますが、実際実装するとなると
それなりにコードを書かなきゃなりません。

index.android.js の例

[bash]
import React from “react”
import {View, Dimensions, Alert} from “react-native”

〜　中略　〜

handleLayoutChange(event) {
let {height, width} = Dimensions.get(“window”)
if (height > width) {
Alert.alert(“縦向き PORTRAIT”)
}
else{
Alert.alert(“横向き LANDSCAPE”)
}
}

render() {
{
this.handleLayoutChange(event)
}}>