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的样式属性中增加固定的宽度。
|---------------------------------------------------------|
| |
| 审核说明 这里是比较多的文字内容,需 |
| 要换行显示,看到的效果大致 |
| 这样的 |
|---------------------------------------------------------|
模拟效果图
本想将手机上的截图贴在这里,但是数据线经常出问题,连不上电脑,也就不折腾了,因为比较简单,通过上面这种方式,大家也可以看到效果。
示例代码:
<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
- React Naitve实现Text显示多行的功能
- React Native实现Text显示...的效果
- react-naitve picker组件封装
- React-Naitve 百度地图配置教程
- react native开发:实现点击左侧选择项,右侧显示内容的功能
- [2]React 深入浅出-----React的一个高级表格实现功能
- react-naitve我踩得第一个坑
- React Native之Text嵌套显示
- react native Text实现限制行数不显示省略号,尾部直接截断
- 重写struts2的TEXT标签对象以实现自己想在标签上增加默认显示内容的功能
- react native实现可展开Text控件
- react native实现可展开Text控件
- react-native 实现上传功能
- 用react实现了tab选项卡的功能
- React-Native进阶_7.TextInput的使用实现搜索功能
- Flex中实现多表头显示的功能
- WinXP显示桌面功能的实现
- jsp实现分页显示的功能
- 电商异步消息系统的实践
- tomcat 日志分割
- js组合模式透明性带来的安全问题
- 动态组件(可模拟选项卡)
- vue-router
- React Naitve实现Text显示多行的功能
- 寒假计划
- 【学写外挂必看感悟】一个外行游戏辅助作者的写挂经历
- mac 下的 bash gradle command not found
- python爬虫之图片下载
- H5直播器
- bzoj2333 [SCOI2011]棘手的操作
- 基于ubuntu14.04 ijkPlayer乎an
- springmvc出现页面引用的js,css等静态资源访问出现404问题