React Nativeでアプリの見た目を整えよう～スタイルでコンポーネントをレイアウトする

基礎からはじめるReact Native入門 第7回

　前回に続いて、React Nativeにおけるスタイルの使い方として、コンポーネントをレイアウト（配置）する方法を解説します。装飾と同じく、レイアウトについてもCSSの機能を踏襲しており、ブラウザの世界でたたき上げられてきた方法で柔軟にレイアウトを組めます。

対象読者

• JavaScriptとWeb開発の基礎に理解がある方
• Reactを用いたJavaScriptアプリケーション開発の未経験者

前提環境

　筆者の検証環境は以下の通りです。

• macOS Catalina 10.15
• Node.js 12.4.0／npm 6.9.0
• expo-cli 3.11.1
• expo 36.0.0（React Native 0.61）
• React 16.9.0

レイアウトのためのスタイル

　第6回で解説したとおり、React Nativeのスタイルは、大別すると装飾とレイアウトの2つに分類できます。装飾は、コンポーネント自身の見た目を変えるためのスタイルでした。今回解説するレイアウトは、コンポーネントを画面上に配置するためのスタイルです。

　レイアウトが得意な分野について、少し触れておきましょう。図1のデザイン資料では、あえて装飾を最低限にして、レイアウトを表現することに注力しました。

図1：レイアウトの例

　過度な装飾をしなくても、アプリのような見た目になります。レイアウトを駆使することで、コンポーネントを自由に並べられるようになり、こういったアプリの画面を組み立てられるようになります。

レイアウト機能の役割

　個別のスタイルについて解説する前に、レイアウトという機能の目的についてお話しましょう。React Nativeのレイアウト機能は、Facebook製のレイアウトエンジン「Yoga」によって実現されています。Yogaは、Flexbox（CSS3 Webレイアウトモデル）を中心とした多くのCSSプロパティをサポートしていますが、その目的を突き詰めると、主に次の2つの事項を決定することを目指しています。

• あるコンポーネントの左上を、画面内のXY座標におけるどこにするのか
• あるコンポーネントの大きさ（幅と高さ）をどの値にするのか

　簡単な例を示してみましょう。図2の灰色の線で囲まれた部分が1つのコンポーネントです。

図2：レイアウトは左上の座標（ピンク）と幅・高さ（青）を決定する

　起点となる左上座標と幅、高さ、この3つの値がそろえばコンポーネントを描画できます。座標が左上なのは、AndroidとiOSがサポートするXY座標系が、左上を(x=0,y=0)としているためです。

　さて、1つのコンポーネントだけに着目した場合は簡単な話ですが、実際の画面には多数のコンポーネントが存在しています。多数のコンポーネントがひしめきあう画面内には、これもまた大量に指定されたスタイルが存在しています。

　これらを考慮しながら、画面内にコンポーネントをちょうどよく収めて並べるために、すべてのコンポーネントに座標と幅、高さを与えるのが、レイアウトエンジンであるYogaの役割です。「これは縮めてもよい」「これはここまでしか広げてはいけない」「これとこれは隙間を空けないといけないので、こちらの座標をずらそう」といった複雑な調整を繰り返していることになります。

　こういった事情を意識して実装する機会は少ないかもしれませんが、レイアウトが思いどおりにいかない場合は、レイアウトエンジンが座標と幅、高さを決定するための情報を、スタイルに記述し忘れていないかを考えてみましょう。