React Native布局指南--FlexBox

基础概念

宽与高的概念

在学习FlexBox之前首先要清楚一个概念“宽和高”。一个组件的高度和宽度决定了它在屏幕上的尺寸，也就是大小。

尺寸的像素无关性

在React Native中尺寸是没有单位的，它代表了设备独立像素。

<View style={
    {
   width:100,height:100}}>
        <Text style={
   {
   fontSize:16,margin:20}}>尺寸</Text>
</View>

上述代码，运行在Android上时，View的长和宽被解释成：100dp 单位是dp，字体被解释成16sp 单位是sp，运行在iOS上时尺寸单位被解释称了pt，这些单位确保了布局在任何不同dpi的手机屏