前文中我已经介绍过了react-native-video这个库并且用它实现了一个全屏播放的demo，基本上把实现全屏的原理讲解清楚了。本篇文章是在前作的基础上重新撰写一个简单的视频播放器App，分享并总结一下个人的经验。
播放器的UI参考了腾讯视频、爱奇艺等主流播放器，主要参照腾讯视频来实现。效果如下：
本播放器支持以下功能：
- 可加载本地和远程视频地址
- 支持播放和暂停
- 支持横竖屏切换
- 横屏显示视频标题
- 静音功能
- 支持视频选集切换
- 横屏清晰度切换
- 横屏展示分享
- 调整音量
- 调整播放速率
- 适配iPhone X
第三方库
主要用到三个库，前两个是实现播放器功能必须的，导航库可任选。
目前使用的就是这个库。最初是看到很多人都在问该怎么实现全屏播放，因为presentFullscreenPlayer并不支持Android，在研究了一下这个库之后想了想解决方案，就是我上篇文章说到的实现过程。这个视频播放器虽然还有很多问题，但还是可以用的，目前还没有发现哪个封装的react native播放器能比这个好多少。如果想要更好的性能、效果，最好还是基于原生自己实现、自己封装。
能够强制屏幕旋转，监听屏幕旋转，使用简单方便。
这个不必多说，JS实现的react native导航库，非常方便好用。react native导航库非常多，解决方案也都不错，看个人喜好选择。
细节总结
- CSS和flexbox布局的使用，必要时使用absolute的方式设置控件绝对位置。
- 通过改变播放器宽高实现全屏，部分控件的宽高也要随之改变才能正常显示。
- 使用
Orientation强制屏幕旋转。 - 使用
BackHandler监听安卓物理返回键的点击，横屏下点返回键回到竖屏，再次点击返回键返回到上个界面。 DeviceInfo的isIPhoneX_deprecated属性可用来判断是否是iPhone X，在非iPhone X的设备上，这个值为undefined。从这个属性名可以看出这个属性以后可能不会再用，推荐使用第三方的react-native-device-info 来获取设备信息再进行判断。- iPhone X的适配，全屏播放时刘海部分要空出来，以免部分区域被刘海遮住，为了左右对称两边空出同样宽度的空间，宽度为刘海的高度，即iPhone X下状态栏的高度44。
- render中引用视频播放器时要注意控件的层级，显示在UI层最上层的控件在代码中最后引用，这点与原生UI没区别。
- 任何应用，UI层控件越多，必然会导致加载时开销更大，虽然由于设备性能越来越高我们可能感受不到影响，但在开发过程中还是需要极力避免。这也是本篇App中需要改进的地方。
TODO
- 视频截屏功能
- 改善UI组件代码，减少耦合
- 横屏可以锁定旋转和播放控制
代码地址：github.com/mrarronz/re…/Chapter8-MyVideoApp/MyVideoApp。喜欢的点个赞Star一下呗，谢谢关注。
