大家好,今天讲一讲Text控件显示多行的功能,先给大家上一张图,看下效果:
|---------------------------------------------------------|
| |
| 审核说明 这里是比较多的文字内容,需 |
| 要换行显示,看到的效果大致 |
| 这样的 |
|---------------------------------------------------------|
模拟效果图
本想将手机上的截图贴在这里,但是数据线经常出问题,连不上电脑,也就不折腾了,因为比较简单,通过上面这种方式,大家也可以看到效果。
示例代码:
<View style = {[styles.row_style,styles.textBorder]}>
<Text numberOfLines={1} style = {[styles.baseFont,styles.marginRight10,styles.marginLeft15]}>审核说明</Text>
<Text numberOfLines={10} style = {[styles.rightFont,styles.paddingBottom15]}>这里是比较多的文字内容,需要换行显示,看到的效果大致就是这样的</Text>
</View>
解析:View设置行显示布局,View中包含了两个Text,看到的效果是前面的文字长度是固定的,后面的文字内容可能是变的在实际开发中,后面的Text需要换行显示,其中最重要的属性就是设置numberOfLines={10},其中的数字可以设置的稍微大些如果不确定有多少文字。
没错,就是这么简单,再复杂的东西也是由这些简单的东西组成的。如果想在指定位置换行,可以给第二个Text的样式属性中增加固定的宽度。
|---------------------------------------------------------|
| |
| 审核说明 这里是比较多的文字内容,需 |
| 要换行显示,看到的效果大致 |
| 这样的 |
|---------------------------------------------------------|
模拟效果图
本想将手机上的截图贴在这里,但是数据线经常出问题,连不上电脑,也就不折腾了,因为比较简单,通过上面这种方式,大家也可以看到效果。
示例代码:
<View style = {[styles.row_style,styles.textBorder]}>
<Text numberOfLines={1} style = {[styles.baseFont,styles.marginRight10,styles.marginLeft15]}>审核说明</Text>
<Text numberOfLines={10} style = {[styles.rightFont,styles.paddingBottom15]}>这里是比较多的文字内容,需要换行显示,看到的效果大致就是这样的</Text>
</View>
解析:View设置行显示布局,View中包含了两个Text,看到的效果是前面的文字长度是固定的,后面的文字内容可能是变的在实际开发中,后面的Text需要换行显示,其中最重要的属性就是设置numberOfLines={10},其中的数字可以设置的稍微大些如果不确定有多少文字。
没错,就是这么简单,再复杂的东西也是由这些简单的东西组成的。如果想在指定位置换行,可以给第二个Text的样式属性中增加固定的宽度。