Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

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

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2019/12/17 11:00

 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コンポーネントが装飾された
図1:Textコンポーネントが装飾された

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

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


  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト 中川幸哉(ナカガワユキヤ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:基礎からはじめるReact Native入門
All contents copyright © 2005-2020 Shoeisha Co., Ltd. All rights reserved. ver.1.5