好久没写博客了，最近一直在忙自己用React Native写的第二个APP。 期间也面试过两家招聘有关React Native的公司，只是去练级。面试后，结果是我都被拒了。 理由：React这门技术在找工作上挺吃亏的。
言归正传，本章将讲解以下几个部分：
1.React Native 和 React 2.React Native第三方组件3.曾使用过的Reacat Naitve第三方组件4.曾使用过的常用组件
1.React Native 和 React
记得之前收藏过的一篇文章[《揭秘React生态体系》][1]，里面提到过React涉及到的领域很广泛，有：WEB端，移动端，服务器端，VR领域等。
我面试的第一家公司是React涉及到Web端的公司，公司规模还挺大。面试官是两个中级前端开发，问了很多关于React相关的组件和前端理论知识，比如React的某某方法是干啥的；简单介绍下React的源码的执行流程；使用过React哪些插件或中间件；POST和GET的区别等。对于在公司以Code小程序的我，以前的理论都忘得差不多了，React相关的理论和深入，我没时间研究，所以一问就愣住了。哈哈，看来我在理论方面还得加强啊！
我面试的第二家公司是React涉及到移动端的公司，也确实问了很多关于React Native方面的知识点。比如React Native的生命周期；述说一下Redux的执行流程是怎样的；Action、Reducer是什么；Redux中compose方法是干嘛的，有几个参数；使用moment如何初始化当前日期；为什么使用Redux-Persist；为什么使用Immutable；为什么使用Redux-Thunk。尽管这些问题我能一一问答，但是他都不是特别满意，理由可能是因为我没怎么仔细看过这些插件的源码吧，因为我只会用。最后被拒的理由也很简单，他们是想找个能写第三方React Native组件的Coder，而我只会用别人的呀。
2.React Native第三方组件
RN之所以强大，其最大的特点是可以直接通过JS去写原生应用。
但是这里有个问题，如果你只会单纯的JS，对Obejct-C或Java这两门语言一点都不熟悉的话，那么使用RN这个框架也挺困难的。
为什么这样说呢？
其根本原因是JS会去调用原生的代码，在真实的项目中，会用到各种各样优秀的RN第三方组件。
如果你Java或OC一点都不会的时候，遇到整合第三方组件时需要集成JAR包（Android）、Libary（iOS）的时候，会各种不成功或集成失败。
直接的反应就是在整合RN第三方组件的时候会报错或运行不起来。
除此之外，如果想一起实现iOS、Andoid导入自定义字体；微信登录、分享、支付；支付宝支付；极光推送通知等第三方服务的时候，想弄成功就更难上加难了，因为尽管说能一起实现，其实也会去调用各自不同的SDK，Andorid就需要配置Android的SDK、iOS就需要配置iOS的SDK。
总结：想很好的学习和使用RN的人应该具备： 1.JS一定要好；2.要会一丁点Java或OC的基本功； 3.了解并尝试iOS、Android不同的特性，包括开发、签名、打包、上线 4.不要怕麻烦，坚持就能成功；
3.曾使用过的Reacat Naitve第三方组件
该节会详细讲解我目前用到的所有RN优秀的第三方组件，我不会写组件、但是能用大牛们封装的且优秀的组件，我也觉得很知足。
因为，在我的眼中牛人有三种：1.能自食其力，独立自主地研发一个较成熟的框架或插件。2.能对技术有自己独特的见解且热爱与别人分享。3.能了解各种前端框架及插件，根据其优势和不足能熟练地运用到不同的项目或创业中。
我从不专注于自己发明一个框架出来，也从不专注于将曾用过的工具或框架都刨根问底，看其怎么实现，但是马云曾说过：我这个人性格之中喜欢挑战变化，我爸从小希望我专注一样东西，但是我永远没专注过。我认为不专注就是一个最大的专注。
下面会有图片和对应框架的一一说明， 截屏设备iOS用的iPhone7、Android用的小米MIX。 PS：由于小米MIX录制的质量不高，只有将就看看呗。 （第三方组件的重要性不分先后）：
1.jpush-react-native（原生代码实现）
官方文档：[
极光推送组件。支持推送消息功能。
iOS：
![iOS][3]
Android： ![Android][4]
2.react-native-wechat（原生代码实现）
官方文档：[微信组件。支持微信登录，分享，支付，收藏等功能。
iOS：
微信登录：
![iOS][6]
微信分享： ![iOS][7]
微信支付： ![iOS][8]
Android： 微信登录： ![Android][9]
微信分享： ![Android][10]
微信支付： ![Android][11]
3.react-native-yunpeng-alipay（原生代码实现）
官方文档：[
支付宝支付组件。支持支付宝支付功能。
iOS：
![iOS][13]
Android： ![Android][14]
4.react-native-smart-amap-location（原生代码实现）
官方文档：[高德地图定位组件。可以获取当前设备所在的经度和纬度及地理编码信息。
iOS：
![iOS][16]
Android： ![Android][17]
5.react-native-smart-amap（原生代码实现）
官方文档：[高德地图地图展示组件。可以查看当前定位的基本信息。
iOS：
![iOS][19]
Android： ![Android][20]
6.react-native-navigtion（原生代码实现）
官方文档：[
路由组件。控制页面之间的切换和跳转，包括tab切换、页面跳入跳出、侧边栏等。
其实还有一个Facebook推荐的组件[react-navigation][22]，我为什么不用它呢，因为我做的第一款APP[《找车场》][23]用的是react-native-navigtion，当时react-navigation还没出来呢。这两款路由组件都很优秀，看你个人选择啦。
iOS：
![iOS][24]
Android： ![Android][25]
7.react-native-splash-screen （原生代码实现）
官方文档：[启动页组件。用户首次进入APP时会加载很多资源，如果看到的是白屏或黑屏的页面，绝对影响用户的体验。
iOS：
![iOS][27]
Android： ![Android][28]
8.react-native-swiper（JS代码实现）
官方文档：[滑动组件。可以实现页面左右滑动的组件，用来制作引导页，Banner，看大图页面等。
iOS：
![iOS][30]
Android： ![iOS][31]
9.react-native-toast（原生代码实现）
官方文档：[弱提示组件。用在表单验证或需要进行弱提示的页面。
iOS：
![iOS][33]
Android： ![Android][34]
10.react-native-orientation（原生代码实现）
官方文档：[设备横竖屏组件。用在需要知道当前设备是横屏还是竖屏，及锁屏的情况。
iOS：
![iOS][36]
Android： 录制的软件不能倒置，影响效果，将就看。 ![Android][37]
11.react-native-video（原生代码实现）
官方文档：[视频播放组件。用在需要播放视频或将视频当背景的页面。
![iOS][39]
Android： 录制的软件不能倒置，影响效果，将就看。 ![Android][40]
12.react-native-blur（原生代码实现）
官方文档：[图片模糊组件。用在需要进行图片模糊的页面。
iOS：
![iOS][42]
Andoid： ![Andoid][43]
13.react-native-ui-kitten（JS代码实现）
官方文档：[
常用的UI组件。选它感觉挺好看的，另外它还有个完整的DEMO项目[kittenTricks][45]。
iOS：
![iOS][46]
Android： ![Android][47]
14.react-native-weather（JS代码实现）
官方文档：[天气UI组件。能通过当前经度、纬度来获取天气情况。
iOS：
![iOS][49]
Andoid： ![Andoid][50]
15.react-native-vector-icons
官方文档：[字体图标组件。可使用自定义的图标。
iOS：
![iOS][52]
Android： ![Android][53]
16.lottie-react-native（原生代码实现）
官方文档：[
强大动画组件。Lottie 是 Airbnb 开发的一款能够为原生应用添加动画效果的开源工具。Lottie 目前提供了 iOS, Android, 和 React Native 版本，能够实时渲染 After Effects 动画特效。
例子里是图片上传成功后在开始加载时，出现了三个圆圈的动画效果就是用Lottie实现。
iOS：
![iOS][55]
Android： ![Android][56]
17.react-native-progress（JS代码实现）
官方文档：[进度条组件。如用户需要上传背景图或头像的时候,需要有进度提示，增加用户体验。
iOS：
![iOS][58]
Android： ![Android][59]
18.react-native-linear-gradient（原生代码实现）
官方文档：[渐变组件。如需要把按钮弄成渐变效果。
iOS：
![iOS][61]
Android： ![Android][62]
19.react-native-android-keyboard-adjust（仅Android）
官方文档：[Android组件。需要更改Android键盘的输入模式的情况使用。
![Android][64]
20.react-native-immediate-phone-call（原生代码实现）
官方文档：[打电话组件。如点击一个电话或手机数字即可马上开始拨打电话。
iOS：
![iOS][66]
Android： ![Android][67]
21.react-native-gallery（JS代码实现）
官方文档：[图片预览组件。可以点击看大图，支持缩放，还可以左右滑动等功能。
PS：我是用的UI Kitten的RkModalImg组件实现点击看大图的，但是该RkModalImg不支持缩放，只能左右滑动，然后又觉得使用react-native-gallery样式不怎么好看，于是乎更改了它俩的源码，整合到了一起。
iOS：
![iOS][69]
Android： ![Android][70]
22.react-native-image-picker（原生代码实现）
官方文档：[图片选择组件。在进行图片上传的时候，能获取当前设备的相册信息，并选择。
iOS：
![iOS][72]
Android： ![Android][73]
23.react-native-actionsheet（Android JS实现，iOS 原生实现）
官方文档：[底部弹出菜单组件。类似iOS的ActionSheet效果，Android也支持，适用场景：点击弹出分享菜单。
iOS：
![iOS][75]
Android： ![Android][76]
24.react-native-action-button（JS代码实现）
官方文档：[悬浮按钮组件。类似Android的FloatingActionButton效果，iOS也支持。
iOS：
![iOS][78]
Android： ![Android][79]
25.react-native-countdown（JS代码实现）
官方文档：[倒计时组件。适用场景：手机发送验证码后倒计时。
iOS：
![iOS][81]
Android： ![Android][82]
26.react-native-deck-swiper（JS代码实现）
官方文档：[翻牌效果组件。适用场景：想实现与tinder相同的效果。
iOS：
![iOS][84]
Android： ![deck][85]
到此我用过的React Native组件就介绍完了，我不是一次性到位的把上面说到的组件全部安装成功后才进行编码的，而是一步一步，慢慢迭代功能出来的。当我在做自己产品的时候，有想法且确定需求后，才会去实施，才会去选第三方组件。并且第三方组件不是所有的点能让你称心如意的，你只能靠自己最大的能力去改源码，去想解决方案。
4.曾使用过的常用组件
1.redux
上一篇[《React-Redux基本用法》][86]文章重点讲解了它，在这里就不做过多说明。它的存在对于React Native意义重大，其实自己现在对Redux也是一知半解，等我把APP弄上线，一定会再来学习Redux。
2.redux middleware
常用的Redux中间件有：
a.redux-thunk
官方说明：[
b.redux-persist
官方说明：[
3.immutable-js
官方说明：[
4.moment.js
官方说明：[
谢谢大家的欣赏！有时间一定多总结给大家！
[36 [34]: 
