RN CSS
2017-11-20 本文已影响25人
风之化身呀
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
