大家好,这里我给大家讲一些React native中的Text控件显示省略号的实现方法。
项目开发中文字的显示是必不可少的,比如产品简介或描述,产品详情等。往往会遇到文字过长的情况,一般怎么处理这些问题呢?
大多数软件都是将界面布局中显示不下的内容显示为...,也就是通过省略号这种方式告诉用户,没有显示完,后面还有内容,一般这种可以
点击进到详情界面看到更全面的信息,好了,废话少说,直接说如何实现Text显示...,直接上示例代码:
<Text style = {styles.widthCal} numberOfLines={1}>这里是需要显示的很长的文字</Text>
其中widthCal为需要显示的文字的宽度的样式.如下:
const styles = StyleSheet.create({
widthSome:{
width:screenWidth - (13+42+5+45+11+18+10),
}
})
screenWidth是获取的屏幕的宽度,获取方法如:
var screenWidth =Dimensions.get('window').width;
解析:Text控件的使用很简单,默认使用方法如:<Text>需要需要显示的文字</Text>,如果这样写是不会显示...的。显示...关键有两点:
1)给需要显示...的文字设置指定的宽度,如示例代码中的样式中的styles.widthCal
2)设置属性numberOfLines={1}
const styles = StyleSheet.create({
widthSome:{
width:screenWidth - (13+42+5+45+11+18+10),//后面的数字是一行中的其他地方显示占居的宽度
}
项目开发中文字的显示是必不可少的,比如产品简介或描述,产品详情等。往往会遇到文字过长的情况,一般怎么处理这些问题呢?
大多数软件都是将界面布局中显示不下的内容显示为...,也就是通过省略号这种方式告诉用户,没有显示完,后面还有内容,一般这种可以
点击进到详情界面看到更全面的信息,好了,废话少说,直接说如何实现Text显示...,直接上示例代码:
<Text style = {styles.widthCal} numberOfLines={1}>这里是需要显示的很长的文字</Text>
其中widthCal为需要显示的文字的宽度的样式.如下:
const styles = StyleSheet.create({
widthSome:{
width:screenWidth - (13+42+5+45+11+18+10),
}
})
screenWidth是获取的屏幕的宽度,获取方法如:
var screenWidth =Dimensions.get('window').width;
解析:Text控件的使用很简单,默认使用方法如:<Text>需要需要显示的文字</Text>,如果这样写是不会显示...的。显示...关键有两点:
1)给需要显示...的文字设置指定的宽度,如示例代码中的样式中的styles.widthCal
2)设置属性numberOfLines={1}
const styles = StyleSheet.create({
widthSome:{
width:screenWidth - (13+42+5+45+11+18+10),//后面的数字是一行中的其他地方显示占居的宽度
}
})
显示...可能会出现无效的情况,在开发项目中发现,固定宽度内显示的字符的个数以及是否是中文、英文或数字等都有关系,一般纯英文或数字或英文数字混合都没有问题,如果中间夹杂了中文,可能会出现没有显示...的问题