React Nativeでメモアプリを作ろう～セットアップと表示

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

textが省略されないようにする

　次に気になるのは、本文が長い場合に省略されてしまう現象です（図9）。

図9：本文が長いと省略される

　これはList.Itemの仕様で、基本的にテキストを1行で表示しようとして、はみ出した場合には末尾を省略します。これは使い方にもよるのですが、今回は「5行に治る範囲までは省略せずに改行して表示する」という仕様にしましょう（リスト6）。

［リスト6］最大行数を指定する

<List.Item
  title={item.text}
  titleNumberOfLines={5} // (1)
  description={
    `作成日時: ${format(item.createdAt, 'yyyy.MM.dd HH:mm')}`
  }
/>

　List.ItemにはtitleNumberOfLinesという属性があるので、（1）のように5を指定します。すると、長いメモにも改行が入り、すべての文面が見えるようになります（図10）。

図10：長いメモがすべて表示されるようになった

　もっと長い文章を表示したい場合は、別の画面で全文を表示するなどのアプローチを考える必要がありますが、今回はこのくらいでいいでしょう。

日時を右寄せにする

　最後に、日時を右寄せにしましょう。List.Itemのdescription属性に入れたテキストにスタイルを適用する場合は、descriptionStyle属性を使用します（リスト7）。

［リスト7］descriptionを右寄せにする

<List.Item
  title={item.text}
  titleNumberOfLines={5}
  description={
    `作成日時: ${format(item.createdAt, 'yyyy.MM.dd HH:mm')}`
  }
  descriptionStyle={{ textAlign: 'right' }} // (1)
/>

　descriptionStyleにはTextに準拠したスタイルを指定するので、（1）のようにtextAlignを指定できました。その結果、図11の通りになります。

図11：日時が右寄せになった

　これで、当初のデザインと近い見た目になりました。

まとめ

　今回はデータ構造の定義と、固定のサンプルデータを表示するところまでを実装しました。次回は画面遷移をしながら、データの作成と保存ができるようにします。