加载中…#React Native#105布局与组件<1>flexbox布局 与View组件
(2017-11-08 15:12:19)| 分类： 计算机相关 |
1.flexbox 布局
flexbox是W3C提出的UI设计模型规范的一种实现。
position： relative: top,left
absolute: top left bottom right
当使用flexBox布局时，尽量不指定组件宽高，或者只指定其中某一个值。
flexDirection： row:横向布局
column：纵向布局
flexWrap: wrap:
长度自动换行，这个要配合alignItem使用，且alignItem不可为stretch.
nowrap:不换行
justifyContent: 定义在一个方向上该如何排列子元素。
flex-start: 从起始排序。
flex-end:从最后开始排序。
center: 居中排布
space-between: 中间用同等宽度空格填充。
space-around: 所有非元素部分用等宽度空格填充。
alignItems: 决定了子元素在次轴方向的排列方式。
flex-start: 前对齐
flex-end: 尾对齐
center: 居中
stretch: 拉伸填充
flex：自动布局空间，默认为0 ，设置为1，会自动填充父窗体除了其他子元素以外的空间。
alignSelf：与alignItems 父窗体定义样式配合使用
auto: 使用父窗体次轴布局
flex-start,flex-end,center,stretch:
使用自己布局，样式与alignItems一样。
boder,margin,padding 与css3类似。驼峰命名规则使用。
2.View 组件： View 组件是RN基础组件。
backgroundColor: 背景色设置，只有Text和TextInput可以继承其父组件背景色。
Opacity:0-1 透明度，0 完全透明，1不透明。
border：有borderStyle,borderColor，borderRadius,样式，颜色，圆角设置。
shadowColor,shadowOffset,shadowOpacity,shadowRadius，阴影相关样式。
overflow: hidden/visible,visible只对iOS有效，Android总是hidden.
elevation:Android特有的灰色阴影效果。
translate 平移，scale 缩放，rotate旋转，skew 倾斜。单位都是数字+deg来组合。
pointerEvents属性：事件传导用的，在RN中总是将触摸事件传导给最上层组件，为了控制哪个组件来响应哪个事件，就用这个方法。
auto：视图可以作为触控事件的目标。
none：视图不能作为触控事件的目标。
box-none：视图自身不能作为触控事件的目标，但其子视图可以。
box-only：视图自身可以作为触控事件的目标，但其子视图不能。
喜欢
0
赠金笔