text
React
Native
省略
三点リーダー

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

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

numberOfLines

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

ellipsizeMode

head - 行がコンテナに収まるように行が表示され、行頭の欠落したテキストは省略記号で示されます。例えば、 "... wxyz"
middle - 最初と最後がコンテナに収まるようになり、途中の欠落したテキストは省略記号で示されます。"ab ... yz"
tail - 最初がコンテナに収まるようになり、行末の欠落したテキストは省略記号で示されます。例えば、 "abcd ..."
clip - コンテナに収まらない文字はひょうじされなくなり、改行されません。

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

参考URL

https://facebook.github.io/react-native/docs/text.html#ellipsizemode