鸿蒙开发-第五天

本文详细解释了ReactNative中背景图的使用、不同布局方式如主轴和交叉轴的间距和对齐,以及文字颜色、大小和布局权重的设置。重点介绍了背景图的选项如大小、位置和缩放,以及如何灵活运用这些属性进行界面设计。

============背景属性============


backgroundColor   背景色

backgroundImage  背景图
backgroundImage(背景图地址,背景图平铺方式 ImageRepeat)
背景图平铺方式是可选参数,是枚举类的
Norepeat    => 默认值
X    => 横向平铺
Y    => 纵向平铺
XY    => 全铺

背景图 VS 图片
如果看到了图片,没有什么东西,用谁都可以,建议用 Image 组件
如果图上还有别的东西,用背景图 backgrondImage


背景图缩放
backgroundImageSize  背景图大小
backgrondImageSize( {width:  , height:  } )
width 和 height 往往只给一个,另一个自适应缩放
backgrondImageSize(ImageSize.Cover)
backgrondImageSize(ImageSize.Contain)
backgrondImageSize(ImageSize.Auto)   => 默认效果


backgroungImagePosition     背景图位置
backgroungImagePosition({x:  , y: })
枚举 :  Alignment

源码
interface Position {x: number,y: number}
enum Alinment {}


===============线性布局=============


主轴    无论Column还是R

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值