ReactNative学习笔记--View

ReactNative学习笔记一 View

ReactNative学习好久了，现在感觉也该写点东西来总结一下了，先总结的就是UI的最常用的组件View。

View组件之布局

ReactNative的布局是Flex布局，flex是Flexible Box的缩写，意为"弹性布局"，具体的用法我就总结一些实用的，也可以移步至大神的博客http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

容器默认存在两根轴：main axis(主轴)和cross axis(次轴)，主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
这里注意：主轴不一定就是水平方向或者竖直方向，跟容器的属性有关，flexDirection:'row'||'column'分别是设置水平方向主轴和竖直方向主轴，默认是竖直方向，可不设置，

flex属性

flexDirection: 'row'(水平方向)||'column'(竖直方向)

flexWrap: 'wrap'(换行)||'nowrap'(不换行，默认)

justifyContent 主轴上的对齐方式

'flex-start', 默认，main start对齐

'flex-end', main end对齐

'center', 主轴线上居中

'space-between', 主轴线上两端对齐，项目之间的间隔都相等

'space-around' 主轴线上均匀分布，项目间距=2*项目边框间距

alignItems 次轴上的对齐方式

'flex-start', 次轴起点对齐

'flex-end' 次轴终点对齐

'center', 次轴方向居中

'stretch' 次轴方向平铺

alignSelf: 项目交叉轴方向自身对齐方式

'flex-start' 开端

'center' 居中

'flex-end' 末端

flex:布局权重
flex=0的项目占用空间仅为内容所需空间，flex=1的项目会占据其余所有空间
| flex=1 |flex=2 | 子组件的主轴方向上的占比 1:2

Layout的其他属性

  width: ReactPropTypes.number, 宽度
  height: ReactPropTypes.number, 高度
  top: ReactPropTypes.number,    上
  left: ReactPropTypes.number,    左
  right: ReactPropTypes.number,   右
  bottom: ReactPropTypes.number,   下  在父容器里的偏移量 需设置position:'absolute'绝对布局
  margin: ReactPropTypes.number,留边，留边的空间不属于容器或者项目自身空间
  marginVertical: ReactPropTypes.number,  上下
  marginHorizontal: ReactPropTypes.number, 左右
  marginTop: ReactPropTypes.number,        上
  marginBottom: ReactPropTypes.number,   下
  marginLeft: ReactPropTypes.number,       左
  marginRight: ReactPropTypes.number,      右
  padding: ReactPropTypes.number,填充，填充的空间属于容器或者项目自身空间
  paddingVertical: ReactPropTypes.number,   上下
  paddingHorizontal: ReactPropTypes.number,  左右
  paddingTop: ReactPropTypes.number,      上
  paddingBottom: ReactPropTypes.number,   下
  paddingLeft: ReactPropTypes.number,     左
  paddingRight: ReactPropTypes.number,   右
  borderWidth: ReactPropTypes.number,  边框宽
  borderTopWidth: ReactPropTypes.number,  上边框宽
  borderRightWidth: ReactPropTypes.number,  右边框宽
  borderBottomWidth: ReactPropTypes.number,  下边框宽
  borderLeftWidth: ReactPropTypes.number,   左边框宽
  borderTopColor: ReactPropTypes.color,  上边框颜色
  borderRightColor: ReactPropTypes.color,  右边颜色
  borderBottomColor: ReactPropTypes.color,  下边颜色
  borderLeftColor: ReactPropTypes.color,   左边颜色
  backgroundColor:    背景色
  borderRadius:    圆角   也可单独设置上圆角 下圆角
  opacity:       设置透明度
  overflow:     设置内容超过容器显示还是隐藏
  elevation:   设置Z轴可以产生立体效果