一、弹性盒模型(The flexible Box Module),又叫FlexBox，意为“弹性布局”，旨在通过弹性的方试来对齐和分布容器中内容的空间，使其能适应不同屏幕，为盒装模型提供最大的灵活性。
Flex布局主要思想是：让容器有能力让其子项目能够改变其宽度、高度（甚至是顺序），以最佳方式填充可用空间；
React native中的FlexBox是这个规范的一个
子集。
容器默认存在两根轴：水平的主轴和垂直的交叉轴，
1、
flexDirection该属性决定主轴的方向 （默认为垂直方向,起点在上沿）
flexDirection: `row | row-reverse | column | column-reverse`
row: 主轴为水平方向，起点在左端
row-reverse：主轴为水平方向，起点在右端。
column(默认值)：主轴为垂直方向，起点在上沿
column-reverse：主轴为垂直方向，起点在下沿
2、
justifyContent 定义了伸缩项目在主轴线的对齐方式
justifyContent:`flex-start | flex-end | center | space-between | space-around`
flex-start(默认值)：伸缩项目向一行的起始位置靠齐。（左对齐）
flex-end：伸缩项目向一行的结束位置靠齐。(右对齐)
center：伸缩项目向一行的中间位置靠齐。(居中)
space-between：两端对齐，项目之间的间隔都相等。
space-around：伸缩项目会平均地分布在行里，两端保留一半的空间。
3、
alignItems ：在侧轴上对齐的方式
alignItems:`flex-start | flex-end | center | baseline | stretch`
定义项目在交叉轴上如何对齐，可以把其想像成侧轴（垂直于主轴）的“对齐方式”。
flex-start：交叉轴的起点对齐。（顶对齐）
flex-end：交叉轴的终点对齐 。(底对齐)
center：交叉轴的中点对齐。居中
baseline：项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
4、
flexWrap 换行操作
flexWrap:`nowrap | wrap | wrap-reverse`
nowrap(默认值)：不换行
wrap:换行,第一行在上方。
wrap-reverse：换行，第一行在下方。（和wrap相反）
5、flex
flex-grow”、“flex-shrink”和“flex-basis”三个属性的缩写， 其中第二个和第三个参数（flex-shrink、flex-basis）是可选参数。
默认值为“0 1 auto”。
宽度 ＝ 弹性宽度 * ( flexGrow / sum( flexGorw ) )
6、
alignSelf属性允许
单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
alignSelf:“auto | flex-start | flex-end | center | baseline | stretch”
三、获取当前屏幕的宽度、高度、分辨率
var dimensions=require('Dimensions');
export default class abcd4 extends Component{
render(){
return(
<View style={{ alignItems:'center',justifyContent:'center',flex:1}}>
{/*当前屏幕的宽度*/}
<Text>当前屏幕宽度:{dimensions.get('window').width}</Text>
{/*当前屏幕的高度*/}
<Text>当前屏幕高度:{dimensions.get('window').height}</Text>
<Text>当前屏幕的分辨率:{dimensions.get('window').scale}</Text>
</View>
);
}
} 原文链接：https://www.f2er.com/react/304788.html