React Native で文字を truncate

プロローグ

Railsって色々ヘルパーが用意されていて便利。ActionView::Helpers::TextHelper#truncateもその一つ。これは、文字列を切り詰めて末尾に...と付けてくれる。そういうヘルパーみたいなのがRNにもあったら便利だな？と思った。そしたら、あった。

numberOfLines と ellipsizeMode

ヘルパーメソッドとかじゃなくて、Textコンポーネントのprop指定でできる。numberOfLines で表示する行数を指定する。そして、ellipsizeModeであの...やつをどこに用いるかを指定できる。末尾に...をつけて省略したい場合、

<Text
  numberOfLines={1}
  ellipsizeMode={'tail'}
>
   longlongfoobarbazbarfoobarbazbar
</Text>

というような具合だ。これで ‘longlongfooba…’ のように表示されるようになる。...をつける箇所の指定の仕方は、公式ドキュメントに詳しい。ひとつ注意をあげるとすれば、ellipsizeModeを指定する場合はnumberOfLinesを指定する必要がある。

エピローグ

こうして無事truncateを自分で実装せずに済んだ。他にもonLayoutなどの指定できるpropがある。これらを適切に使うことで、不要であったり不適切な実装を避けることができる。ReactやReact Native, RelayといったFacebookのOSSに触れていて素晴らしいと思うことの一つは、ドキュメントがきっちりと整備されていることだ。*1

*1:どこかで「FacebookのOSSのポリシーとしてドキュメントが揃うまでリリースしない」という記述を見た気がしたけど、ソースを見つけられなかったので感想止まり。