Flexbox 布局

##1.style

和css差不多，里面包裹着布局样式 eg：style={{height: 20, backgroundColor: '#333333'}}，容器需要引用borderRadius（圆角属性），属性引入import React, { Component } from 'react';import {  AppRegistry,  StyleSheet,  Text,    Image,  View} from 'react-native';

##1.2垂直，居中等属性justifyContent: 'center' 水平alignItems: 'center'垂直居中如果需要水平垂直居中则两个属性引用

##2.布局类型

1.网格布局 

2.嵌套布局

3.绝对定位和相对定位 绝对定位：eg：

2.组件

此处组件类型很多，一般参考api文档，个人感觉很多在android api中出现的控件类型都有。

备注：如果Text元素在Text里边，可以考虑为inline， 如果单独在View里边，那就是Block

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

react 宽度基于pt为单位， 可以通过Dimensions 来获取宽高，PixelRatio 获取密度，如果想使用百分比，可以通过获取屏幕宽度手动计算。

基于flex的布局

view默认宽度为100%

水平居中用alignItems, 垂直居中用justifyContent

基于flex能够实现现有的网格系统需求，且网格能够各种嵌套无bug

图片布局

通过Image.resizeMode来适配图片布局，包括contain, cover, stretch

默认不设置模式等于cover模式

contain模式自适应宽高，给出高度值即可

cover铺满容器，但是会做截取

stretch铺满容器，拉伸

定位：

定位相对于父元素，父元素不用设置position也行

padding 设置在Text元素上的时候会存在bug。所有padding变成了marginBottom

文本元素

文字必须放在Text元素里边

Text元素可以相互嵌套，且存在样式继承关系

numberOfLines 需要放在最外层的Text元素上，且虽然截取了文字但是还是会占用空间