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

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

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

React Native デバイスの縦向き(PORTRAIT)、横向き(LANDSCAPE)の変化を捉える(イベント) へのコメントはまだありません

はじめに

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

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

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

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

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

rn-1

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

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

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

index.android.js の例

動作イメージ

実際にうまく計算できると、こんな感じになります。
rn-2

あとがき

React Native以外でスマホ向けのアプリを作ったことがないので、
実際にこんなロジックを実装しないといけないのかどうかよく分かっておりません。。
なんで、フッターを画面の下にはりつけることぐらい出来ないんだよ・・・
と思いますが、今 軽く調べた感じでは、方法はなさそうなので、
ゴリゴリ計算して求めちゃう方法が、一番手っ取り早い気がします。

もっとスマートな方法があれば、じゃんじゃんコメントください。


About the author:

Related Posts

Leave a comment

Back to Top