React Native 之 flexbox布局

本文详细介绍了ReactNative中Flexbox布局的重要属性,包括justifyContent、alignItems、flexDirection及flex等,通过这些属性能实现控件中内容的精确对齐与布局。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

React Native中支持的flexbox属性

  1. justifyContent : 定义伸缩项目沿主轴线上的对齐方式。

    flex-start:
    flex-end:
    center:
    space-between: 根据属性值的字面意思,剩余的空间留在伸缩项目之间,而且是平均分配,第一个伸缩项目在主轴线的开始位置和main start没有间隙,最后一个伸缩项目在主轴线的结束位置和main end没有间隙。
    space-around:根据属性值的字面意思也很好理解,剩余的空间环绕着伸缩项目,伸缩项目之间平均分配剩余空间,两端伸缩项目距离主轴线的main start和main end,保留一半的空间。

  2. alignItems: 定义伸缩项目在伸缩容器的交叉轴上的对齐方式。
    flex-start:
    flex-end:
    center:
    baseline: 单词的解释是基准线,在交叉轴方向沿基准线中心对齐(这块理解的不好)。
    stretch:伸展,伸缩项目在交叉轴方向拉伸填充整个伸缩容器。(想看到这个属性值的效果,伸缩项目不能设置交叉轴上的长度)。

  3. flexDirection:指定主轴的方向,与LinearLayout中的android:orientation属性相似。
  4. flex: 此属性,由三个属性构成,flex-grow定义了方法比例,flex-shrink定义了缩小比例,flex-basis定义了指定大小,语法:flex:flex-grow flex-shrink flex-basis。如flex:1 ,填充满伸缩容器剩余的空间,很类似于android:weight 属性,即权重,如果希望几个View平均分配整个屏幕宽,可以设置每个item的view的flex为1。
  5. position:“relative”和 “absolute”
  6. borderRadius : 设置View圆角大小,相当于Android中的CardView能力,超赞。

注:justifyContent和alignItems可以定义控件中文字内容的显示位置,等同于我们在Android Native开发中LinearLayout的android:gravity属性的效果。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值