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

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

　React Nativeにおけるスタイルの使い方として、コンポーネントを装飾する方法を解説します。React Nativeで使用できるスタイルは、CSSをベースにしているので、CSSに関する知識があれば比較的容易に習得することができます。ただ、WebブラウザのReactにおけるスタイルよりも書き方の選択肢が狭まっている部分もあるので、React Nativeらしい書き方を学んでいきましょう。

対象読者

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

前提環境

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

• macOS Catalina 10.15
• Node.js 12.4.0／npm 6.9.0
• expo-cli 3.8.0
• expo 35.0.0
• React 16.8.3

レイアウトと装飾のためのスタイル機能（1）

　第3回から第5回にかけて、Reactにおけるコンポーネントの作り方や、状態管理の方法について学んできました。見た目を気にしなければ、これまでの連載で解説した範囲でも、ちょっとしたアプリを作ることができるでしょう。

　しかしながら、アプリには見た目も重要です。そこで、今回と次回は、見た目を整えるための仕組みである「スタイル」について解説します。

　スタイルは、コンポーネント同士の位置関係を調整して配置し、コンポーネント自身の見た目を加工できます。本稿ではまず、スタイルの基本的な使い方を解説します。

style属性

　React Nativeでは、コンポーネントのstyle属性に所定のパラメータを持ったオブジェクトを渡すことで、見た目を加工できます。例えば、Textコンポーネントの文字色を変える場合は、リスト1のように、文字色を表すcolorプロパティを#FF0000（赤色）に設定したオブジェクトをstyle属性へと渡します。オブジェクトは変数を通じて渡しても構いません。

［リスト1］Textコンポーネントの文字色を変える

<Text style={{ color: '#FF0000' }}>hogehoge</Text>

// ただのオブジェクトなので、変数に入れて渡すのも可
// const myStyle = { color: '#FF0000' };
// <Text style={myStyle}>hogehoge</Text>

　すると、画面上で文字が赤く表示されます（図1）。

図1：Textコンポーネントが装飾された

　こういった形で、各コンポーネントのstyle属性にスタイルを指定していくことで、アプリの見た目を整えていくことになります。

　React Nativeのスタイルとして定義できる項目の多くは、CSSに準拠したものになっています。colorのように、CSSで有効な項目をReact Nativeのコンポーネントに指定すると、ブラウザと近い挙動になります。すべての項目がサポートされているわけではありませんが、ブラウザでCSSの経験がある人ならば、比較的早い段階でReact Nativeのスタイルに慣れることができるでしょう。