web-dev-qa-db-ja.com

React行数を使用したネイティブテキストコンポーネント

行数を使用するときにテキストがいつ切り捨てられるかを判断する方法はありますか？どこでも検索していて、明確な答えはありません。ありがとうございました！

reactjsreact-nativereact-native-android
3
H. Wynn

numberOfLines を<Text />コンポーネントの小道具として使用できます。それはコンポーネントの幅に依存し、テキストの長さを計算します。この小道具は一般的に ellipsizeMode で使用されます。例：

<Text numberOfLines={2} ellipsizeMode='tail'>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</Text>
10
namth

これは、レンダリングされるonTextLayoutの配列を含むlinesイベントで可能になりました。長さを見るだけで、限界に達しているかどうかを判断できます。 lines配列には、各行の実際の高さと幅など、テキストが切り捨てられているかどうかを判断するためにさらに使用できるその他の詳細があります。

const NUM_OF_LINES = 5;
const SOME_LONG_TEXT_BLOCK = 'Fill in some long text yourself ...';

return (<Text
  numberOfLines={NUM_OF_LINES}
  onTextLayout={({ nativeEvent: { lines } }) =>
    setState({ showMoreButton: lines.length === NUM_OF_LINES })
  }
>
  {SOME_LONG_TEXT_BLOCK}
</Text>;
2
Arno