React Native にようやく慣れてきた！と思ったら、スタイルの調整で再び足をとられています…。
今までずっと Cordova + React でアプリを作ってきて、スタイルの調整には CSS を使っていたので、なかなか React Native でのスタイルの指定に慣れません。
で、今回は、長い文章を表示する際、文末を省略して、「…」を追加する方法についてです。
数行にわたる長い文章を表示させる時によく使います。
CSS でもよく同じことをやったのですが、React Native だと書き方が全然違うので、これは調べなければわかりませんでした。
今回参考にさせていただいた記事はこちらから。
【React Native】三点リーダーでテキストを省略 – Qiita
https://qiita.com/kondoakio/items/5a27aaf8e6a57b1fc106
サンプルコードはこちら。
<Text numberOfLines={2} ellipsizeMode="tail">
長い文章サンプル長い文章サンプル長い文章サンプル長い文章サンプル長い文章サンプル長い文章サンプル長い文章サンプル長い文章サンプル長い文章サンプル
</Text>
上記サンプルでは、2行以降の文字を省略し、末尾に「…」を表示しています。
必要な記述はこれだけです。
てっきり、Style で定義するかと思ったのですが、Text コンポートに Props があったんですね。
で、今回初めて知ったのですが、文章の省略方法ってこれ以外にもあるらしいです。
文章の省略方法は ellipsizeMode で指定するのですが、単に末尾に「…」を指定するだけでなく、文頭を「…」にしたりだとか、文の中央を「…」で省略したりもできるようです。
指定できる設定は以下の通りです。
| head | 末尾がコンテナに収まるように表示され、文の先頭のテキストを「…」で省略する |
|---|---|
| middle | 開始と終了がコンテナに収まるように表示され、中央のテキストを「…」で省略する |
| tail | 文頭がコンテナに収まるように表示され、行末のテキストを「…」で省略する |
| clip | コンテナに収まらない文字は省略される。「…」で省略されない |
個人的に一番よく使うのは tail かなと思います。
機会があれば、これ以外も使ってみたいですね。
特に middle ！
以上、React Native で長い文章の文末を省略して末尾に「…」を表示させる方法についてでした。
ご参考になれば幸いです。
