react native布局

  • Z时代
  • 2024-01-10
  • 分类：综合

react

像素无关

  • react native中的尺寸是没有单位的，它代表了设备的独立像素

flex box的弹性盒子布局和css3中有何不同？

  • flexDiDirection在react native中的默认值是column，也就是默认是列排列；在web中默认值是row行排列

  • alignItems：在react native中默认是stretch，在web中默认的是flex-start

  • flex:在web中是可以接受三个参数的flex:2 2 10%,但是在react native中默认只能接受一个参数

  • react native:默认不支持以下属性：align-contentflex-basisorderflex-flowflex-shrinkflex-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

以上是 react native布局 的全部内容， 来源链接： utcz.com/z/381126.html

回到顶部