react native布局

像素无关

• 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-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