対象読者
- 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）。
こういった形で、各コンポーネントのstyle属性にスタイルを指定していくことで、アプリの見た目を整えていくことになります。
React Nativeのスタイルとして定義できる項目の多くは、CSSに準拠したものになっています。colorのように、CSSで有効な項目をReact Nativeのコンポーネントに指定すると、ブラウザと近い挙動になります。すべての項目がサポートされているわけではありませんが、ブラウザでCSSの経験がある人ならば、比較的早い段階でReact Nativeのスタイルに慣れることができるでしょう。
