React-native Text文字展示不完需要将剩下的部分使用省略号...来处理

有些时候我们固定了展示文字的View的大小， 但是里面的文字太长展示不完的时候就会将剩余的部分截掉（覆盖掉看不见）。这个时候， 为了用户友好， 可以将展示不下的部分使用省略号代替。

我这里的例子是在app的顶部展示一段 "welcome back， XXX"的文字。 因为在顶部， 我们需要固定高度， 且最多只能展示两行字。

可以看到， 下图中红色圈的部分文字就被截掉了
![在这里插入图片描述](https://img-blog.csdnimg.cn/2021062218001810.png

这个时候就可以使用Text的属性：ellipsizeMode 和 numberOfLines
其中numberOfLines是定义文字的行数， ellipsizeMode则是省略号显示的位置

<View style={usernameHeaderStyle.welcomeTextView}>
	<Text 
		style={usernameHeaderStyle.welcomeText} 
		ellipsizeMode={'tail'} numberOfLines={2}
	>
			{`${header.welcome} ${name}`}
	</Text>
</View>

ellipsizeMode的值可以是：tail、head、 middle、clip
分别的效果是：
1,tail：

2. head

3.middle

4.clip 这里就是默认的截掉