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