react-native - 如何给文本添加省略号效果

Question

我的应用程序中有一个很长的文本，我需要截断它并在末尾添加三个点。

如何在 React Native Text 元素中做到这一点？

谢谢

Answer 1

使用numberOfLines Text 组件上的参数:

<Text numberOfLines={1}>long long long long text<Text>

将产生:

long long long…

(假设您有短宽度容器。)

<小时/>

使用ellipsizeMode参数将省略号移动到 head 或 middle。 tail 是默认值。

<Text numberOfLines={1} ellipsizeMode='head'>long long long long text<Text>

将产生:

…long long text

<小时/>

注意: 当需要相对于应用省略号时，Text 组件还应包含 style={{ flex: 1 }}其容器的大小。对于行布局等很有用。