目的に応じてテキストを使い分ける
それではまず、簡単なところから見ていきましょう。すでに解説した通り、React Native Paperには豊富なTypographyコンポーネントが存在します。リスト5で各コンポーネントを使ってみて、その挙動を確認します。
<Headline>Paper紹介</Headline>
<Title>タイトル</Title>
<Subheading>Typography</Subheading>
<Paragraph>これが段落です。</Paragraph>
<Paragraph>じゅげむじゅげむ ごこうのすりきれ {/*(略)*/}</Paragraph>
<Caption>キャプションも書けます。</Caption>
<Subheading>Button</Subheading>
<Subheading>Card</Subheading>
これを実行してみると、図5のようになります。
アプリ内で見出しや説明文を書く用途であれば、十分な種類が用意されています。画面内のテキスト装飾の種類は、あまり増やさないほうが読みやすいので、基本的にはここにあるコンポーネントを使って、アプリ内のテキストを作っていくとよいでしょう。
なお、今回は使いませんでしたが、どのコンポーネントもTextコンポーネントと同じ項目のスタイルを指定できるので、アプリに合わせてカスタマイズしてください。
3つのボタン
次はボタンです。Material Designでは、ボタンは「Text Button」「Outlined Button」「Contained Button」のいずれかの姿で表示することになっています（図6）。
これらの姿は、それぞれReact Native Paperで再現されています。Toggle Buttonもありますが、形が違うので、React Native Paperでは別枠になりました。
では、どのような見た目になるのか見てみましょう。Main.jsに、リスト6の通り追記します。
<Subheading>Button</Subheading> <Button> ふつうのボタン(mode: text) </Button> <Button mode="contained"> containedなボタン </Button> <Button mode="outlined"> outlinedなボタン </Button>
これを実行すると、図7のようになります。
どれもきれいですね。Contained ButtonやOutlined Buttonは角丸になっていますが、これは第6回で触れたborderRadiusで実装されています。これはスタイルでカスタマイズが可能なので、試しにstyle={{ borderRadius: 12 }}を付与してみましょう（図8）。
丸くなりました。前回までに学んだスタイルの知識は、ライブラリが提供するコンポーネントに対しても有効なので、出来合いのものを使うのが味気ないと感じた際は、どんどんカスタマイズしましょう。
カードで情報をまとめる
カードは、ある情報がひとまとまりのものであることを、視覚的に示せる表現方法です。Googleはこの表現をよく使っており、YouTubeアプリでの動画リストもその1つです。試しに、架空の動画のカードを作ってみましょう（リスト7）。
<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の通りになります。
どこかで見たことがある見た目になりましたね。こういったものを素早く作れるのが、ライブラリを利用する魅力です。
筆者が使う場合は、Card.CoverやCard.Actionsを使わずに、タイトルと本文だけのカードを作ることも多いです。いろいろな組み合わせを試してみてください。
まとめ
今回は、スタイルを適用済みのコンポーネントを集めたライブラリとして、React Native Paperを解説しました。最終的に、図10の画面になりました。
これまでのサンプルよりは見栄えがするものになりました。これで1つの画面の中をきれいにすることはできそうです。次回は、複数の画面の間を行き来する方法について解説します。
