React-Native样式学习

width: Dimensions.get('window').width,//屏幕的宽
height: Dimensions.get('window').height//屏幕的高

• alignItems enum('flex-start', 'flex-end', 'center', 'stretch')
  这个属性是指控制子视图的辅助方向的布局 ，如果子视图在的主要方向上是垂直排列，这个属性则控制横向的方向，反之则是竖向。

• alignSelf enum('auto', 'flex-start', 'flex-end', 'center', 'stretch')
  这个属性将会覆盖父视图的alignltem的布局设定。

• border相关

• borderBottomWidth number（下）

• borderLeftWidth number （左）

• borderRightWidth number （右）

• borderTopWidth number （上）

• borderWidth number （全部设置）
  这个属性和css3中的border工作机制一样。

• flex number
  在react-native中的flex和css中不一样。在react-native中，flex只能是用数字来表示。它的工作显示是根据css-layout规则运行的。
  当flex是一个正数（positive number）的时候，他的大小将和父视图成比例弹性缩放，当它设置为2的时候，他的大小将是设置为1的时候的两倍。
  当它设置为0的时候，它的大小将根据宽和高（width and height）来设置。
  当它设置为-1的时候，他的它的大小将根据宽和高（width and height）来设置，如果空间不够了，它将根据最小的宽和高来设置大小。

• flexDirection enum('row', 'row-reverse', 'column', 'column-reverse')
  flexDirection 控制了子控件（视图）在父视图（控件）默认的排列方向，在css中默认是row（横向），而在react-native中默认为column（竖向）。和css中的flex-direction工作性质一样。

• flexWrap enum ( 'warp', 'nowrap')
  flexWrap控制子控件是否能控制它的子项是否能换行当他们到底部的容器的时候。
  和css中flex-wrap的工作方式一样。

• height （width）number
  height（width）设置控件的高（宽）。

• justifyContent enum（'flex-start', 'flex-end', 'center', 'space-between', 'space-around'）
  justifyContent控制子控件的的主要对齐方向。例如，如果子控件是垂直排列的，那么这个属性则控制在垂直方向上如何对齐。

• left number
  left 是一个控制该控件左边缘的偏移的逻辑像素。它和css中left的工作方式相似，但不一样。在react-native中，必须使用逻辑像素单位，而不是百分比，em，或者是其他的东西。

• margin number
  设置控件的外边距值（同时设置了4个值）。

• marginBottom number
  底部边距。

• marginHorizontal number
  同时设置左右边距。

• marginLeft number
  左边距。

• marginRight number
  右边距。

• marginTop number
  顶部边距。

• marginVertical number
  同时设置上下边距。

• maxHeight number
  设置垂直方向上的最大高度。
  同样，这个属性和css中的max-height工作的极为相似，但是，在react-native中必须使用像素逻辑单位，而不是百分比，em，或者是其他的东西。

• maxWidth number
  同上。

• minHeight number
  同上。

• minWidth number
  同上。

• padding number
  设置元素与元素内容之间的边距，即内边距。
  同时设置4个内容。

• paddingBottom number
  底部内边距。

• paddingHorizontal number
  同时设置左右内边距。

• paddingLeft number
  设置左边的内边距。

• paddingRight number
  设置右边的内边距。

• paddingTop number
  是指上边的内边距。

• paddingVertical number
  同时设置上下内边距。

• position enum （'absolute', 'relative'）
  定位属性。他的工作在react-native中的工作方式和css中的工作方式是相似的，但是在这里，每个控件的位置都是相对于其父视图的，所以当其设置为absolute时，它总是针对于它的父控件。
  如果你想设置子元素对于父元素有特定的像素位置时，设置为absolute属性。
  如果你想设置子元素的位置并不受父元素的影响，那么不要用这个style来设置，请用component tree。

• right number
  right 定义了定位元素右外边距边界与其包含块右边界之间的偏移距离。

• top number
  同上。

• zIndex number
  一般不会用到，可能在动画中用到。
  和css中z-index属性一样。

文章原址[点击跳转] http://reactnative.cn/docs/0.31/layout-props.html