RN 常用标签属性集合

该篇主要记录在react native开发中,标签常用的一些属性,会持续更新

一、文字省略号 numberOfLines

numberOfLines={number} 其中number表示超过多少行时显示省略号,如

<Text numberOfLines={1} style={[styles.itemRightLetter]}>
    在文字长度超过一行时,便显示省略号
</Text>

二、文字省略号 &emsp

RN没有专门的属性去处理文字首行缩进多少个字符,但可以用&emsp来实现;一个&emsp代码一个字符

<Text>&emsp;&emsp;该APP基于沙颍河流域水生态环境多目标智能管理平台结构以及业务进行构建。</Text>

三、图片大小控制 resizeMode

resizeMode : “contain” | “cover” | “stretch”;

  1. cover模式只求在显示比例不失真的情况下填充整个显示区域。可以对图片进行放大或者缩小,超出显示区域的部分不显示, 也就是说,图片可能部分会显示不了。
  2. contain模式是要求显示整张图片, 可以对它进行等比缩小, 图片会显示完整,可能会露出Image控件的底色。 如果图片宽高都小于控件宽高,则不会对图片进行放大。
  3. stretch模式不考虑保持图片原来的宽,高比.填充整个Image定义的显示区域,这种模式显示的图片可能会畸形和失真。

例如:

<Image
     source={{uri: src}}
     resizeMode ='contain'
     style={{
         width: width,
         height: height
     }}
     onLoad={() => this.setState({loading: 2})}
     onError={() => {
         console.log(src);
         this.setState({loading: 3})
     }}
 />
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值