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一下唄，謝謝關注。