[ReactNative] 画面に収まらない文字を切り捨てて表示する

はじめに

ReactNativeで実装している際に長文のTextを改行なしで表示する際に、収まりきらない文字列を ... で省略する方法を紹介します。

How to

numberOfLinesとellipsizeModeを使います。
Textタブのプロパティに上記を設定してあげるだけで簡単に実装できます。

numberOfLines は長文を何行で表示するかを宣言するものです。
ellipsizeMode と組み合わせる際は１と設定する必要があります。

sample.js

<Text
  numberOfLines={1} // １行で表示するように設定
  ellipsizeMode="tail"  // 末尾を切り捨てるように設定
>
  // 長文の文字列
</Text>

• head 端がコンテナに収まり、線の最初の欠落したテキストが省略記号で示されます。

例： ... wxyz

• middle 最初と最後がコンテナに収まり、中央の欠落したテキストが省略記号で示されます。

例： ab ... yz

• tail 最初がコンテナに収まり、行の最後に欠落しているテキストが省略記号で示されます。

例： abcd ...

• clip コンテナの端を越えた文字列は描画されません。