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

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

Textを装飾する主なプロパティ

　Textコンポーネントを装飾するためのスタイルについて見ていきましょう。こちらも公式ドキュメントから抜粋します。

　Viewコンポーネント向けのスタイルすべてに加えて、次のCSSプロパティがAndroid/iOS共通で利用できます。

• color：文字の色を指定する
• fontSize：フォントのサイズを指定する
• fontStyle：フォントのスタイル（普通または斜体）を指定する
• fontWeight：フォントのウェイトを指定する
• fontFamily：フォントのファミリーを指定する
• lineHeight：行の高さを指定する
• letterSpacing：文字の感覚を指定する（Androidは5.0以降のみ）
• textAlign：文字の寄せ方を指定する
• textDecorationLine：文字への線による装飾（打ち消し線、下線など）を指定する
• textShadowColor：文字の影の色を指定する
• textShadowOffset：文字の影のずらし幅を指定する
• textShadowRadius：文字の影の丸みを指定する
• textTransform：アルファベットの大文字や小文字への変換を指定する

　いずれもブラウザに近い挙動になるよう、調整されています。

［コラム］なぜTextのスタイルは特別扱いなのか

　React NativeでTextコンポーネントにしか付けられないスタイルは、ブラウザであれば大多数のHTML要素に対して適用が可能なものばかりです。この差異は、各プラットフォームの成り立ちと関係があります。

　ブラウザは従来、ハイパーテキストを表示するためのソフトウェアでした。ブラウザの中で最も優先される存在はテキストであり、HTMLやCSSはそれを装飾し、メタ情報を付与するためのものです。そのため、<img>や<video>等の特殊な要素を除けば、ほとんどのHTML要素がテキストを子要素に持つことができ、そこにスタイルを適用できるのは、自然な流れなのでしょう。

　一方、AndroidやiOSといったプラットフォームにとって、テキストは最も重要な存在というわけではありません。TextViewなどの「テキストを表示する機能」を持った、特別なUIコンポーネントの力を借りて、ようやくテキストが表示できるのです。

　React Nativeのスタイルは、CSSに似た形にするといった方針で作られたため、テキストの装飾に関するスタイルも、できるだけそのままの形で取り込まれました。しかしながら、その適用先であるネイティブUIのほとんどにはテキストを表示する機能がないため、結果的にTextコンポーネントだけで使えるスタイル、といった区分が生まれてしまったのです。

テキストの一部だけを装飾する

　HTMLライクな実装をしていると、テキストの途中の一部分だけをこんなふうに装飾したくなることがありますね。HTMLであればインライン要素である<span>にスタイルを付けて、テキストの一部分だけを装飾しますが、React Nativeでも同じようなことをしたいところです。

　実は、Textコンポーネントの中にTextコンポーネントを記述することで、内側のTextコンポーネントをインライン要素として扱うことができます。

［リスト6］Textコンポーネントをインライン要素として使う

<Text>
  この文章の中で
  <Text style={{ color: 'red' }}>この部分だけは赤色で</Text>
  あとは普通の色です
</Text>

　リスト6を実行すると、図5のように表示されます。

図5：文章の一部分だけを装飾する

　Textコンポーネントには「Textコンポーネントの内側に配置されたときだけインライン要素として振る舞う」といった特殊な挙動が実装されているため、こういった運用をすることができます。ネイティブUIを直接操作する場合よりも、いくらか簡単に装飾できるので、オススメです。

まとめ

　今回はスタイルの基礎の解説と、装飾に関するプロパティを確認しました。次回はレイアウトに関するプロパティを解説します。