前文中我已經介紹過了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一下唄，謝謝關注。