React Native 布局 （7）

版权声明：1.版权归原作者Moment ° 回忆 ✨所有； 2.未经原作者允许不得转载本文内容，否则将视为侵权； 3.转载或者引用本文内容请注明来源及原作者； 4.对于不遵守此声明或者其他违法使用本文内容者，本人依法保留追究权等。 https://blog.csdn.net/qq_35366269/article/details/88249469

React Native 布局 

          在React Native中采用的是FlexBox （弹性框）进行布局的，FlexBox 提供了在不同尺寸设备上都能保持一致的布局方式，FlexBox 是弹性框布局规范。

         在React Native 中，尺寸是没有单位的，它代表设备的独立像素。如下通过fontSize设置该组件的字体大小

<View>

     <Text   style={{fontSize:20}}>点我使用ref</Text>
</View>

         上述代码，当运行在Android设备上时，当前的字体大小20就会被解析为 20dp ,而运行在IOS设备上时，当前的20就会被解析为20pt ，这样就确保了布局在任何不同密度（dpi）的手机上运行时，显示都不会出现问题。

React Native 中的FlexBox 和 Web 中css 中的FlexBox不同之处：

1. flexDirection : 在React Native中的默认值为'column'（默认以列进行排列），在Web CSS中的默认值'row'（默认以行进行排列）
2. alignitems：在React Native中的默认值为'stretch' ，在Web CSS中的默认值为'flex-start'
3. fiex：在React Native中该属性只接收一个参数，在Web CSS可以接收多个参数，比如fiex:2 2 10%;
4. 在React Native 中不支持如下属性：align-content、flex-basis、order、flex-basis、flex-flow、flex-grow、flex-shrink