文章内容仅供浏览， 大牛路过
作为一个合格的前端工程师，2019年火了哪些技术，相信大家都有所了解， 想一想，在2019年已经过半了：
node.js以及Vue和React框架掌握了吗？
买的《JavaScript高级程序设计》翻过吗？
其实，近两年前端圈内的竞争越来越激烈，企业对前端岗位的要求更为严格（现在找工作你会发现，企业不仅仅是需要应聘者基础扎实，而且对主流技术栈和技术广度都有要求），对前端从业者来说，不进则退的危机感和焦虑感更重了。在这个时候，作为前端一员的我们必须得提升自己，丰富技术库，不说在前面领跑，跟着大势跑别被甩开是你是否还能在这一行混的基础条件。
为什么用React-Native
在去年有一个热词PWA，PWA（Progressive Web App）是 Google 于 2016 年提出的概念，2017 年已被迅速采用。可显著提高加载速度、可离线工作、可被添加至主屏、全屏执行、推送通知消息等等。国内有不少公司实践了PWA，例如饿了么、阿里等。PWA就是用混合式APP开发的理念来实现的，混合式APP，其实内容本质上还是网站内容，只是可以显示在APP上，在缓存、通知、后台功能等方面表现更好。可以理解为打包成APP的网站，2019年将会有更多的网站向混合式APP转型。
前端开发混合式APP优势在于，开发门槛低，开发效率高，可以同时面向两个平台，快速完成开发。目前前端开发混合式APP有很多框架和平台开发，其中，React Native是比较不错的开发框架。
React-Native的优点
1.页面加载速度：React-native号称是99%接近原生体验，它是写js代码，映射原生去渲染页面，页面渲染速度和原生是差不多的。但是H5就不一样，特别依赖手机的硬件配置，ios对H5应用的支持还可以，但是安卓就差太多。安卓里面一些高端机型运行H5应用还可以，但是大部分机型都是会有点卡顿，尤其是像加载图片这种比较消耗资源的操作，H5的页面渲染速度和React-native就会有很明显的差别。
2.机型适配：例如H5对于现在的iPhone x刘海屏的适配就比较麻烦。还有对于很多安卓机型H5并不能做很好的适配。
3.动画效果：H5的动画是通过css和js实现的，对于一些复杂的动画实现相对是比价困难的，也是比较消耗内存的。React-native自身提供了实现动画的API，如果为了过于追求动画的流畅度，React-native还可以借助原生去实现，原生封装出来空间来供给React-native使用。
相对于原生来说，RN也是具有优势的：
1.热更新：做移动开发的都知道，苹果的审核一直让大家很头疼。原生对于紧急的业务开发完成之后，还必须等待苹果的审核才能上线，这个时候React-native就体现出来它的优势，在不碰及原生代码的时候，可以直接通过热更新js代码来实现实时发布。React-native可以很好的支持线上业务功快速迭代和随时更新发布。
2.开发效率：React-native有20%的代码是原生代码，80%的代码为可以复用的js代码，这样大大缩短了开发周期，为企业节省了发开成本。
3.维护成本低：如果业务仅仅涉及到js代码的修改，在APP开发需求少的情况下，一个React-native工程师就可以很好的维护本该APP，同时又为企业节省了维护成本（即使刚开始该工程师不会原生开发，但是经过长时间的锻炼，或多或少都会一点）。
4.学习成本低：React-native使得之前做前端的工程师可以快速的参与APP的开发，降低了学习成本。
5.扩展性强：React-native提供了自定义原生控件以供js调用渲染的API，这使得它的扩展性极其强大。
强大的后台背景，为Facebook的“亲儿子”
1.React-native作为Facebook的“亲儿子”，依靠这棵大树，让这个技术一直在不断的完善。
2.React-native本身是开源的，所有的源代码都是可以看到的。React-native从开源道现在就备受关注，React-native是历史上第一个没到正式版本，github却有近8w星星的项目。社区的组件得益库也已经比较丰富，社区活跃度比较高。对于很多复杂的组件，我们都不需要重复再去造轮子。
开发中遇到的一些问题
1.认真、仔细研究文档，可以避免不少问题和少走弯路（废话）
2.键盘遮挡问题
解决办法：
- 使用 react-native 的 KeyboardAvoidingView 组件包裹
即将内容视图全部包裹在 KeyboardAvoidingView 组件中：
-
使用native-base的 Content 组件包裹内容视图 ===>> 推荐
Content是 native-base 提供的内容视图组件，特别在和 Container 组件配套使用时是否好用的！
3.android环境下gif没有动画，不支持gif图
解决办法： 在android/app/build.gradle中的dependencies字段中添加：
compile 'com.facebook.fresco:fresco:1.5.0'
compile 'com.facebook.fresco:animated-gif:1.5.0'
然后再react-native run-android就ok了。
4.安卓禁止横屏
解决办法：在AndroidManifest.xml 文件中添加
<activity
...
android:screenOrientation="portrait"
....
</activity>
5.加载App中的图片资源
方法一：使用uri 必须要指定大小
<Image source={{uri: 'app_icon'}} style={{width: 200, height: 200}} />
方法二：使用require('image!x')语法，无需指定尺寸
<Image source={require('image!app_icon')} style={styles.imageStyle} />
6.安卓键盘弹出时会把绝对定位的组件和键盘一块弹上去
解决办法：在AndroidManifest.xml 文件中的设置
<activity
...
android:windowSoftInputMode="stateAlwaysHidden|adjustPan">
....
</activity>
7.禁用StackNavigator的Navigation Bar
解决办法： WelcomePage: { screen: WelcomePage, navigationOptions: { header: null, // 可以通过将header设为null 来禁用StackNavigator的Navigation Bar } },
