UIライブラリで美しいデザインを手軽に利用する

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

目的に応じてテキストを使い分ける

　それではまず、簡単なところから見ていきましょう。すでに解説した通り、React Native Paperには豊富なTypographyコンポーネントが存在します。リスト5で各コンポーネントを使ってみて、その挙動を確認します。

［リスト5］Main.js

<Headline>Paper紹介</Headline>
<Title>タイトル</Title>
<Subheading>Typography</Subheading>
<Paragraph>これが段落です。</Paragraph>
<Paragraph>じゅげむじゅげむ　ごこうのすりきれ　{/*(略)*/}</Paragraph>
<Caption>キャプションも書けます。</Caption>
<Subheading>Button</Subheading>
<Subheading>Card</Subheading>

　これを実行してみると、図5のようになります。

図5：テキストの表示

　アプリ内で見出しや説明文を書く用途であれば、十分な種類が用意されています。画面内のテキスト装飾の種類は、あまり増やさないほうが読みやすいので、基本的にはここにあるコンポーネントを使って、アプリ内のテキストを作っていくとよいでしょう。

　なお、今回は使いませんでしたが、どのコンポーネントもTextコンポーネントと同じ項目のスタイルを指定できるので、アプリに合わせてカスタマイズしてください。

3つのボタン

　次はボタンです。Material Designでは、ボタンは「Text Button」「Outlined Button」「Contained Button」のいずれかの姿で表示することになっています（図6）。

図6：ボタンの種類（公式ドキュメントより引用）

　これらの姿は、それぞれReact Native Paperで再現されています。Toggle Buttonもありますが、形が違うので、React Native Paperでは別枠になりました。

　では、どのような見た目になるのか見てみましょう。Main.jsに、リスト6の通り追記します。

［リスト6］Main.js

<Subheading>Button</Subheading>
<Button>
  ふつうのボタン(mode: text)
</Button>
<Button mode="contained">
  containedなボタン
</Button>
<Button mode="outlined">
  outlinedなボタン
</Button>

　これを実行すると、図7のようになります。

図7：ボタンの種類

　どれもきれいですね。Contained ButtonやOutlined Buttonは角丸になっていますが、これは第6回で触れたborderRadiusで実装されています。これはスタイルでカスタマイズが可能なので、試しにstyle={{ borderRadius: 12 }}を付与してみましょう（図8）。

図8：borderRadiusを12にしたボタン

　丸くなりました。前回までに学んだスタイルの知識は、ライブラリが提供するコンポーネントに対しても有効なので、出来合いのものを使うのが味気ないと感じた際は、どんどんカスタマイズしましょう。

カードで情報をまとめる

　カードは、ある情報がひとまとまりのものであることを、視覚的に示せる表現方法です。Googleはこの表現をよく使っており、YouTubeアプリでの動画リストもその1つです。試しに、架空の動画のカードを作ってみましょう（リスト7）。

［リスト7］Main.js

<Subheading>Card</Subheading>
<Card>
  <Card.Cover source={require('../assets/ramen.jpg')} />{/*(1)*/}
  {/*(2)*/}
  <Card.Title
    title="ラーメン紀行 2日目"
    subtitle="炎のラーメンチャンネル"
    left={props => <Avatar.Text {...props} label="YN" />} />{/*(3)*/}
  <Card.Content>{/*(4)*/}
    <Paragraph>
      とうとうこの伝説のお店にやってきました。
    </Paragraph>
  </Card.Content>
  <Card.Actions style={{ justifyContent: 'flex-end' }}>{/*(5)*/}
    <Button>見ない</Button>
    <Button mode="contained">見る</Button>
  </Card.Actions>
</Card>

　（1）のCard.Coverは、カバー画像と呼ばれる、サムネイルなどを表示する領域です。Imageコンポーネントと同等のsource属性が必須なので、assetsフォルダに配置した画像を読み込ませています。

　（2）のCard.Titleで、カードのタイトルを指定できます。このコンポーネントは高機能で、タイトルの表示だけではなく、サブタイトルの表示や（3）のアイコンの表示までこなします。

　何か本文を書きたい場合は、（4）のCard.Contentを使います。（5）のCard.Actionsは、カードの情報に対して何らかの操作を求める場合に、Buttonと併用して使います。標準のスタイルでは左寄せになるので、justifyContent: 'flex-end'を与えて右寄せにしました。これを実行すると、図9の通りになります。

図9：YouTube風のカード

　どこかで見たことがある見た目になりましたね。こういったものを素早く作れるのが、ライブラリを利用する魅力です。

　筆者が使う場合は、Card.CoverやCard.Actionsを使わずに、タイトルと本文だけのカードを作ることも多いです。いろいろな組み合わせを試してみてください。

まとめ

　今回は、スタイルを適用済みのコンポーネントを集めたライブラリとして、React Native Paperを解説しました。最終的に、図10の画面になりました。

図10：今回の成果物

　これまでのサンプルよりは見栄えがするものになりました。これで1つの画面の中をきれいにすることはできそうです。次回は、複数の画面の間を行き来する方法について解説します。