ReactNative进阶（四十四）：Mobile App 适配性优化_react native 适配

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

   尺寸

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

值得一提的是，React Native中的FlexBox 和Web CSS上FlexBox工作方式是一样的。但有些地方还是有些出入的。

React Native中的FlexBox 和Web CSS上FlexBox的不同之处

• flexDirection: React Native中默认为flexDirection:'column'，在Web CSS中默认为flex-direction:'row'；
• alignItems: React Native中默认为alignItems:'stretch'，在Web CSS中默认align-items:'flex-start'；
• flex: 相比Web CSS的flex接受多参数，如:flex: 2 2 10%;，在 React Native中flex只接受一个参数。

不支持属性：align-content，flex-basis，order，flex-flow，flex-grow，flex-shrink。

以上是React Native中的FlexBox 和Web CSSS上FlexBox的不同之处，记住这几点，你可以像在Web CSS上使用FlexBox一样，在React Native中使用FlexBox。

Flex in React Native
React Native所支持的Flex属性如下：

父视图属性(容器属性)：

• flexDirection：‘row’, ‘column’,’row-reverse’,’column-reverse’；
• flexWrap：‘wrap’, ‘nowrap’；
• justifyContent ：‘flex-start’, ‘flex-end’, ‘center’, ‘space-between’, ‘space-around’；
• alignItems：‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’；

其他布局 in React Native

以下属性是React Native所支持的除Flex以外的其它布局属性。

视图边框

• | border | Left | Right | Top>Width 个方向边框宽度 |
• borderWidth number 边框宽度
• | border | Left | Right | Top>Color 个方向边框的颜色 |
• borderColor 边框颜色

尺寸

• width number
• height number

外边距

• margin number 外边距
• marginBottom number 下外边距
• marginHorizontal number 左右外边距
• marginLeft number 左外边距
• marginRight number 右外边距
• marginTop number 上外边距
• marginVertical number 上下外边距

内边距

• padding number 内边距
• paddingBottom number 下内边距
• paddingHorizontal number 左右内边距
• paddingLeft number 做内边距
• paddingRight number 右内边距
• paddingTop number 上内边距
• paddingVertical number 上下内边距

边缘

• left number 属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
• right number 属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移
• top number 属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
• bottom number 属性规定元素的底部边缘。该属性定义了一个定位元素的下外边距边界与其包含块下边界之间的偏移。
  定位(position)
• position enum(‘absolute’, ‘relative’)属性设置元素的定位方式，为将要定位的元素定义定位规则。

• absolute：生成绝对定位的元素，元素位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
• relative：生成相对定位的元素，相对于其正常位置进行定位。因此，”left:20” 会向元素的 LEFT 位置添加 20 像素。

三、多分辨率屏幕的适配

无论是Android还是iOS，现在不同分辨率的设备越来越多，在React Native项目中，如果需要适配不同分辨率的屏幕，则需要采用iOS上对图片命名的方式，为每个图标提供1x、2x、3x三种大小的尺寸（如：[email protected]，[email protected]，[email protected]），React Native会根据屏幕的分辨率来动态的选择显示不同尺寸的图片。比如：在img目录下有如下三种尺寸的check.png。

接下来，就可以通过下面的方式来使用check.png

注⚠️：在使用具有不同分辨率的图标时，一定要引用标准分辨率的图片如require('./img/check.png')，如果写成require('./img/[email protected]')，那么应用在不同分辨率的设备上都只会显示[email protected]图片，也就无法达到图片自适配的效果。

四、拓展阅读

• 《Web APP UI一致性设计》
• 《Vue进阶（幺柒幺）：前端用户体验提升（五）Flex实现弹性布局》
• 《网站开发进阶（六十二）最强大的 CSS 布局——Grid 布局》
• 《Vue进阶（幺柒零）：前端用户体验提升（四）应用rem/em实现字体自适应》
• 《Vue进阶（幺陆捌）：前端用户体验提升（三）应用vw/vh实现自定义布局》
• 《Vue进阶（幺捌伍）：动态设置系统字体》
• 《网站开发进阶（六十六）CSS3 - 新单位vmin/vmax与旧单位ex/ch使用详解》
• 阿里巴巴矢量图标库
• 《Vue进阶（幺肆贰）：CSS-静态定位，相对定位，绝对定位，固定定位的用法和区别详解》
• 《Vue进阶（幺肆叁）：如何用绝对定位(position:absolute)完美定位布局及其注意事项》