宽高 由于所有的控件都是以堆积木的方式从低处往高处走，所以下面从上往下递增的木堆
export default class FixedDimensionsBasics extends Component {
render() {
return (
<View>
<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
<View style={{width: 100, height: 100, backgroundColor: 'skyblue'}} />
<View style={{width: 150, height: 150, backgroundColor: 'steelblue'}} />
</View>
);
}
}
position:
可以取值relative(默认)相对布局,absolute绝对布局(也是相对于父视图)
绝对布局位置调整有top，bottom,left,right来布局
flex弹性宽高
在组件样式中使用flex可以使其在可利用的空间中动态地扩张或收缩。一般而言我们会使用flex:1指定某个组件扩张以撑满所有剩余的空间。如果有多个并列的子组件使用了flex:1，则这些子组件会平分父容器中剩余的空间。如果这些并列的子组件的flex值不一样，则谁的值更大，谁占据剩余空间的比例就更大（即占据剩余空间的比等于并列组件间flex值的比）。
注意分割父试图剩余空间，父试图如果没有规定大小，那么子视图设置flex也无法分割，分割法根据布局来走，默认为竖直方向
flexDirection
在组件的style中指定flexDirection可以决定布局的主轴
column竖直轴,默认值是竖直轴umn)方向。
row水平轴 : 子元素是横向从左往后方向排列;row-reverse也是水平方向子元素从右往左方向排列,
flexWrap属性
默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
它可能取三个值
flexWrap:'nowrap'（默认）：不换行。
flexWrap:'wrap'：换行，第一行在上方，要和alignItems:'flex-start'一起使用(默认是这个属性)，在必要的时候拆行，如果内部元素(子组件)设置好了大小，排列满了内部视图会自动换行
row-reverse自己应该能猜到了吧，就不上图了，就是居右了
Justify Content
在组件的 style 中指定justifyContent可以决定其子元素沿着主轴的排列方式。子元素是应该靠近主轴的起始端还是末尾段分布呢？亦或应该均匀分布？对应的这些可选项有（前面三个挨着，后面的一般不挨着）：
下面的主要以flexDirection: row为例，column的看第一个图对比下column和row就明白了哈
flex-start(居前显示，多个在左边挨着，默认)、
center(子元素居中，多个会在中间挨着)、
flex-end(居后显示，多个会在右边挨着)、
后三个需要元素大于等于两个才有效果
space-between(两边元素贴边，中间间距平分剩余空间)、
space-around(两边元素不贴边、两边元素距离边为r，元素之间内部间距2r)
space-evenly(两边元素不贴边， 子元素与边缘之间间隙都一样)。
Align Items
在组件的 style 中指定alignItems可以决定其子元素沿着次轴（与主轴垂直的轴，比如若主轴方向为row，则次轴方向为column）的排列方式。子元素是应该靠近次轴的起始端还是末尾段分布呢？亦或应该均匀分布？对应的这些可选项有：flex-start、center、flex-end以及stretch(填充完毕次轴方向)。 这个以flexDirection:column为例 flex-start:
flex-end：
center:
stretch(填充次轴方向，主轴是竖着（垂直）的，那么水平方向填充满):
width标识横向长度，height标识纵向方向长度，不受方向布局约束
alignSelf
有五种类型:auto,flex-start,flex-end,center,stretch,用途可以忽略父组件中的alignItems中的取值，按照设置的alignSelf属性来走
默认为auto，按照父组件来，
大方向上常用的就这几个了，剩下的style属性列出来一些吧,flexbox常用的边距相关就是margin和padding, left，right这种事绝对布局使用的
基本上有一个属性，就有和他相对的试试吧，剩下的可以百度查找一下
margin开头的外边距 padding开头的内边距
marginHorizontal marginVertical paddingVertical paddingHorizontal width: 10px width: 100% borderColor: white borderBottom: 2px solid marginLeft marginBottom borderRadius: 10px borderWidth: 2px position: 'absolute' left: right: justifyContent: alignItems alignSelf display: flex flexDirection: column paddingBottom: fontSize: 20px fontWeight: 'bold' padding: 10px flex-wrap: 'wrap' color: backgoundColor:
ps：实际使用像素不是px哦，一般都是百分比布局
附上点代码:（实际使用通常是px2dp(像素)）
export let screenW = Dimensions.get('window').width;
export let screenH = Dimensions.get('window')/height;
const scale = 2;//屏幕像素比
const w = 750/scale;
const h = 1334/scale;//高度一般不推荐
设置字体的时候可以按照上面的比例来调整，例如
export default function px2dp（size） {
let scaleWidth = screenW / w;
size = Math.round((size*scaleWidth + 0.5)); //像素四舍五入，最小为0.5px
return size/scale;
}
