ReactNative干货分享——视频播放器App

前文中我已经介绍过了react-native-video这个库而且用它实现了一个全屏播放的demo，基本上把实现全屏的原理讲解清楚了。本篇文章是在前做的基础上从新撰写一个简单的视频播放器App，分享并总结一下我的的经验。

播放器的UI参考了腾讯视频、爱奇艺等主流播放器，主要参照腾讯视频来实现。效果以下：

本播放器支持如下功能：

1. 可加载本地和远程视频地址
2. 支持播放和暂停
3. 支持横竖屏切换
4. 横屏显示视频标题
5. 静音功能
6. 支持视频选集切换
7. 横屏清晰度切换
8. 横屏展现分享
9. 调整音量
10. 调整播放速率
11. 适配iPhone X

第三方库

主要用到三个库，前两个是实现播放器功能必须的，导航库可任选。

1. react-native-video

目前使用的就是这个库。最初是看到不少人都在问该怎么实现全屏播放，由于presentFullscreenPlayer并不支持Android，在研究了一下这个库以后想了想解决方案，就是我上篇文章说到的实现过程。这个视频播放器虽然还有不少问题，但仍是能够用的，目前尚未发现哪一个封装的react native播放器能比这个好多少。若是想要更好的性能、效果，最好仍是基于原生本身实现、本身封装。

2. react-native-orientation

可以强制屏幕旋转，监听屏幕旋转，使用简单方便。

3. react-navigation

这个没必要多说，JS实现的react native导航库，很是方便好用。react native导航库很是多，解决方案也都不错，看我的喜爱选择。

细节总结

1. CSS和flexbox布局的使用，必要时使用absolute的方式设置控件绝对位置。
2. 经过改变播放器宽高实现全屏，部分控件的宽高也要随之改变才能正常显示。
3. 使用Orientation强制屏幕旋转。
4. 使用BackHandler监听安卓物理返回键的点击，横屏下点返回键回到竖屏，再次点击返回键返回到上个界面。
5. DeviceInfo的isIPhoneX_deprecated属性可用来判断是不是iPhone X，在非iPhone X的设备上，这个值为undefined。从这个属性名能够看出这个属性之后可能不会再用，推荐使用第三方的react-native-device-info 来获取设备信息再进行判断。
6. iPhone X的适配，全屏播放时刘海部分要空出来，以避免部分区域被刘海遮住，为了左右对称两边空出一样宽度的空间，宽度为刘海的高度，即iPhone X下状态栏的高度44。
7. render中引用视频播放器时要注意控件的层级，显示在UI层最上层的控件在代码中最后引用，这点与原生UI没区别。
8. 任何应用，UI层控件越多，必然会致使加载时开销更大，虽然因为设备性能愈来愈高咱们可能感觉不到影响，但在开发过程当中仍是须要极力避免。这也是本篇App中须要改进的地方。

TODO

1. 视频截屏功能
2. 改善UI组件代码，减小耦合
3. 横屏能够锁定旋转和播放控制

代码地址：github.com/mrarronz/re…/Chapter8-MyVideoApp/MyVideoApp。喜欢的点个赞Star一下呗，谢谢关注。