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

最后

推荐一些系统学习的途径和方法。

每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。里面的一些 HTML，CSS，HTTP 技术教程也相当不错。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

HTML 和 CSS：

在RN实现移动应用开发过程中，通过链接跳转方式跳转至其他技术栈（例如Vue、React、Angular、H5、JSP）实现的应用情形中，适配性问题同样值得深思。

二、React Native 中的 FlexBox

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

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

上述代码，运行在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<Bottom | Left | Right | Top>Width 个方向边框宽度 |
• borderWidth number 边框宽度
• | border<Bottom | 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’)属性设置元素的定位方式，为将要定位的元素定义定位规则。

专业技能

一般来说，面试官会根据你的简历内容去提问，但是技术基础还有需要自己去准备分类，形成自己的知识体系的。简单列一下我自己遇到的一些题

• HTML+CSS
• JavaScript
• 前端框架
• 前端性能优化
• 前端监控
• 模块化+项目构建
• 代码管理
• 信息安全
• 网络协议
• 浏览器
• 算法与数据结构
• 团队管理
• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

最近得空把之前遇到的面试题做了一个整理，包括我本人自己去面试遇到的，还有其他人员去面试遇到的，还有网上刷到的，我都统一的整理了一下，希望对大家有用。

其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器等等

由于文章篇幅有限，仅展示部分内容