React Naitve实现Text显示多行的功能

来源:互联网 发布:毒医横行未删节知乐 编辑:程序博客网 时间:2024/06/05 21:15

大家好,今天讲一讲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的样式属性中增加固定的宽度。


1 0
原创粉丝点击