像素无关
  • react native中的尺寸是没有单位的,它代表了设备的独立像素
flex box的弹性盒子布局和css3中有何不同?
  • flexDiDirectionreact native中的默认值是column,也就是默认是列排列;在web中默认值是row行排列
  • alignItems:在react native中默认是stretch,在web中默认的是flex-start
  • flex:在web中是可以接受三个参数的flex:2 2 10%,但是在react native中默认只能接受一个参数
  • react native:默认不支持以下属性:align-content flex-basis order flex-flow flex-shrink flex-grow
flex in React Native
  • 父视图属性(容器属性)
    • flexDirection(row、coloum、row-reverse、column-reverse)
    • flexWrap(wrap、nonowrap默认是nowrap即不允许多行排列,默认不换行)
    • justyfyContent(flex-start、flex-end、center、space-around、space-between主轴排列)
    • alignItems:flex-start、flex-end、stretch、center
  • 子视图属性
    • alignSelf:用于确定视图本身的对齐方式,可以用来灵活的重写容器的alignItems属性,默认情况下是auto也就是继承了父容器的alignItem属性(auto自动,flex-start,flex-end、center、stretch)
    • flex:定义可伸缩能力,默认为0;可以默认为争夺空间的权重
其他
  • 视图边框
    • borderWidth
    • borderColor
  • 视图尺寸
    • width
    • height
  • 外边距
    • margin
    • marginHorizental左右外边距
    • marginVertical上下外边距
  • 内边距
    • padding
  • 边缘
    • left、right、top、bottom
  • 定位:
    • position:relative(相对其正常位置进行定位)、absolute
Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐