RN中基本都使用flexbox进行布局,但语法和常规的CSS不同:
- 属性名都使用驼峰结构,而不是中划线,如:alignItems,不能写align-items
- RN中display默认是 flex,另一个值是:‘none’
- RN中flexDirection默认是 column
- 属性取值基本就两种:数值和字符串,数值类如width的写法是width:200,不能带单位‘px’,与之类似的还有height,marginTop,left等在常规CSS中需要带px的属性;对于不带px的都要写成字符串的形式,例如position:"absolute"
- 属性的写法:可带双引号,也可不带。如position:"absolute"或者"position":"absolute"
- RN中CSS规则之间用逗号","分隔,常规CSS中用分号";"
- 阴影的实现:RN端不支持box-shadow,用四个类似的属性代替ios,Android上用elevation,elevation不能设置阴影颜色,统一灰色
shadowOffset: { width: 0, height: 5 },
shadowRadius: 3,
shadowColor: '#41464b',
shadowOpacity: 0.1,
elevation: 4
- RN中 postion只有‘relative’ 和 ‘absolute’ ;默认为‘relative’。在Android中如果子元素使用absolute,且其宽高超过父元素,会被父元素的边界所截断
- RN 中所有基本组件默认宽度都是100%,如Text,View,TextInput。当其参与flex布局时,Text,TextInput宽度会变为自身内容宽度
- View 与div类似,但View不能单独使用,必须包含其他组件
- box-sizing 默认值:'border-box'
- 所有默认值如下:
box-sizing: border-box;
position: relative;
display: flex;
flex-direction: column;
align-items: stretch;
flex-shrink: 0;
border: 0 solid black;
margin: 0;
padding: 0