【React Native】三点リーダーでテキストを省略

文字が多い時に省略する。

numberOfLines

テキスト表示コンテナの行数

ellipsizeMode

head - 行がコンテナに収まるように行が表示され、行頭の欠落したテキストは省略記号で示されます。
例えば、 "... wxyz"

middle - 最初と最後がコンテナに収まるようになり、途中の欠落したテキストは省略記号で示されます。
例えば、"ab ... yz"

tail - 最初がコンテナに収まるようになり、行末の欠落したテキストは省略記号で示されます。
例えば、 "abcd ..."

clip - コンテナに収まらない文字はひょうじされなくなり、改行されません。

例

<Text
  numberOfLines={1}
  ellipsizeMode="tail"
>
longlongfoobarbazbarfoobarbazbarlonglongfoobarbazbarfoobarbazbarlonglongfoobarbazbarfoobarbazbarlonglongfoobarbazbarfoobarbazbarlonglongfoobarbazbarfoobarbazbar
</Text>

参考URL