RN常用布局和CSS

<---容器属性--->
#布局主轴方向
flexDirection :
    row           :从左向右依次排列 
    row-reverse   :从右向左依次排列
    column           :从上向下排列
    column-reverse:从下向上排列

#元素沿着主轴对齐方式
justifyContent:
    flex-start     :与主轴起点对齐
    center         :主轴居中对齐
    flex-end      :与主轴终点对齐
    space-around :每个项目两侧的间隔相等。项目之间的间隔比项目与边框的间隔大一倍
    space-between:两端对齐，项目之间的间隔都相等
    
#子元素沿着次轴排列方式
alignItems:
    flex-start    :元素向交叉轴起点对齐
    center        :元素在交叉轴居中。如果元素在交叉轴上的高度高于其容器，那么在两个方向上溢出距离相同
    flex-end    :元素向交叉轴终点对齐
    stretch        :如果项目未设置高度或设为 auto，将占满整个容器的高度
    baseline    : 项目的第一行文字的基线对齐。
    
#换行方式
flexWrap:
    nowrap:（默认）：元素只排列在一行上，可能导致溢出。
    wrap：元素在一行排列不下时，就进行多行排列。
    wrap-reverse：多行排列，对 wrap 做一个反转。

#容器占比
flex: 属性决定其占据父容器的比例。React Native 中 flex 只能是数字。如果是正整数，就是与数字的大小成比例。如果为 0 就是自生的大小，并且不能扩展。    
    
<---项目属性--->
flexGrow 属性定义项目的放大比例，默认为 0，即如果存在剩余空间，也不放大。如果所有项目的 flexGrow 属性都为 1，则它们将等分剩余空间（如果有的话）。如果一个项目的 flexGrow 属性为 2，其他项目都为 1，则前者占据的剩余空间将比其他项多一倍。    
flexShrink 属性定义了项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小。如果所有项目的 flexShrink 属性都为 1，当空间不足时，都将等比例缩小。如果一个项目的 flexShrink 属性为 0，其他项目都为 1，则空间不足时，前者不缩小。负值对该属性无效
flexBasis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为 auto，即项目的本来大小。它可以设为跟 width 或 height 属性一样的值（比如350px），则项目将占据固定空间。
alignSelf 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 alignItems 属性。
    auto: 按照自身设置的宽高来显示，如果没设置，效果跟 stretch 一样。
    flex-start: 与父容器顶部对齐。
    flex-end: 与父容器底部对齐。
    center: 位于中间位置。
    stretch: 交叉轴拉伸，不设置具体的 width/height 的时候 stretch 才有效果
baseline: 项目的第一行文字的基线对齐。


<------其他布局属性--------->
#视图边框
borderBottomWidth number 底部边框宽度
borderLeftWidth number 左边框宽度
borderRightWidth number 右边框宽度
borderTopWidth number 顶部边框宽度
borderWidth number 边框宽度
borderColor 边框颜色
border<Bottom|Left|Right|Top>Color 个方向边框的颜色
borderRadius  边框圆角
border<Bottom|Left|Right|Top>Radius 个方向边框的圆角
borderStyle 四个边框的样式
例：borderStyle:‘dotted’
none 定义无边框。
hidden 与 none 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted 定义点状边框。在大多数浏览器中呈现为实线。
dashed 定义虚线。在大多数浏览器中呈现为实线。
solid 定义实线。
double 定义双线。双线的宽度等于 border-width 的值。
groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。
inset 定义 3D inset 边框。其效果取决于 border-color 的值。
outset 定义 3D outset 边框。其效果取决于 border-color 的值。
inherit 规定应该从父元素继承边框样式。
#尺寸
width number
height number
#外边距
margin number 外边距
marginBottom number 下外边距
marginHorizontal number 左右外边距
marginLeft number 左外边距
marginRight number 右外边距
marginTop number 上外边距
marginVertical number 上下外边距
#内边距
padding number 内边距
paddingBottom number 下内边距
paddingHorizontal number 左右内边距
paddingLeft number 做内边距
paddingRight number 右内边距
paddingTop number 上内边距
paddingVertical number 上下内边距
#边缘
left number 属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
right number 属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移
top number 属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
bottom number 属性规定元素的底部边缘。该属性定义了一个定位元素的下外边距边界与其包含块下边界之间的偏移。
#定位(position)
position enum(‘absolute‘, ‘relative‘)属性设置元素的定位方式，为将要定位的元素定义定位规则。
absolute：生成绝对定位的元素，元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative：生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

    
backfaceVisibility,当元素不面向屏幕时是否可见
例：backfaceVisibility:‘visible’
visible (背面是可见的)
hidden (背面是不可见的)

backgroundColor,背景色
例：backgroundColor:’#cccccc’
color (指定背景颜色。在CSS颜色值近可能的寻找一个颜色值的完整列表)
transparent (指定背景颜色应该是透明的。这是默认)
inherit (指定背景颜色，应该从父元素继承)

fontFamily,字体
例：fontFamily:‘courier’

fontSize,字体大小
例：fontSize:20

textAlign,文本对齐方式
例：textAlign:‘left’
left 把文本排列到左边。默认值：由浏览器决定。
right 把文本排列到右边。
center 把文本排列到中间。
justify 实现两端对齐文本效果

textDecorationColor ,下划线文本中下划线的颜色
例：textDecorationColor:‘red

fontStyle,
例：fontStyle:‘italic’
normal 默认值。浏览器显示一个标准的字体样式。
italic 浏览器会显示一个斜体的字体样式。
oblique 浏览器会显示一个倾斜的字体样式

textShadowColor,文字阴影颜色
例：textShadowColor：‘red’

textShadowOffset,文字阴影偏移量
例：textShadowOffset:2

textShadowRadius,文字阴影圆角
例：textShadowRadius:3
textDecorationColor,下划线文本中下划线的颜色
例：textDecorationColor:‘red’

textDecorationLine,显示一条线
例：textDecorationLine:‘underline’
none 默认值。规定文本修饰没有线条。 测试 ?
underline 规定文本的下方将显示一条线。 测试 ?
overline 规定文本的上方将显示一条线。 测试 ?
line-through 规定文本的中间将显示一条线

textDecorationStyle,显示一条线的样式
例：textDecorationStyle:‘solid’
solid 默认值。线条将显示为单线。
double 线条将显示为双线。
dotted 线条将显示为点状线。
dashed 线条将显示为虚线。
wavy 线条将显示为波浪线

fontWeight,文本的粗细
例：fontWeight:‘bold’
normal (默认值。定义标准的字符)
bold (定义粗体字符)
bolder (定义更粗的字符)
lighter (定义更细的字符)
100 (定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold)

height,设置元素的高度
例：height:200

width 设置元素的宽度
例：width:200

left,把图像的左边缘设置在其包含元素左边缘向右5像素的位置
例：left:20
right,把图像的右边缘设置在其包含元素右边缘向左 5 像素的位置
例：right:5

rotation,元素旋转
例：rotation：180

letterSpacing 字母间距
例：letterSpacing:20

lineHeight ,行高
例：lineHeight:30

overflow,设置overflow属性进行滚动
例：overflow:‘hidden’
visible (默认值。内容不会被修剪，会呈现在元素框之外)
hidden (内容会被修剪，并且其余内容是不可见的)
scroll (内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容)

图片 resizeMode ,用户调整大小
例：resizeMode:‘cover’
cover 等比拉伸
strech 保持原有大小
contain 图片拉伸 充满空间