React Native(以下簡稱RN)給我們提供了一種開發原生應用的新方案，它允許我們用前端語言開發跨平臺的原生應用，對于熟悉前端的開發人員來說可以用極低的成本開發原生應用。目前已經有眾多線上案例。
一: 項目介紹
本文介紹的是基于RN實現的一款在特殊應用場景下的視頻直播APP(以下稱為Live App)，實現的功能有：
- 基于HLS的視頻直播
- 基于Socket的私有協議
- 節目分類信息展示
- 節目列表展示
- 播放歷史展示
-
Android+IOS平臺支持
全屏.png
應用場景
注：家庭媒體中心是我們應用場景下的server,可以理解成用戶家中的機頂盒
家庭媒體中心自帶路由功能，手機端通過WLAN連接到家庭媒體中心，至此Live App就可以從家庭媒體中心獲取頻道列表以及建立基于Socket的連接，實現App與家庭媒體中心的控制連接。
二: 第三方庫
目前Live App使用到的第三方庫主要有：
- react-native-video
- react-native-tcp
- react-navigation
- react-native-device-info
- react-native-network-info
- react-native-storage
- react-native-splash-screen
- react-native-scrollable-tab-view
為了做到跨平臺，在第三方庫選用的時候一定要注意其是否支持跨平臺，不要將平臺兼容性問題都遺留到測試階段。
三: react-native-video使用介紹
RN本身并沒有提供原生的視頻播放組件，這里我們使用官方推薦的第三方視頻播放組件react-native-video。
在使用react-native-video庫。
react-native-video源碼中提供的三個主要文件android-exoplayer,android,ios。
安卓平臺下實現基于HLS的視頻直播我們應該使用android-exoplayer，官方對其的介紹是：
- Android Video library built by Google, with a lot of support
- Supports DASH, HlS, & SmoothStreaming adaptive streams
- Supports formats such as MP4, M4A, FMP4, WebM, MKV, MP3, Ogg, WAV, MPEG-TS, MPEG-PS, FLV and ADTS (AAC).
若要使用exoplayer提供的功能，需要設置文件android/settings.gradle
include ':react-native-video'
project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android-exoplayer')
至于IOS平臺可按官方文檔中介紹的使用。
四：react-native-tcp使用介紹
使用react-native-tcp的目的是實現基于Socket的私有協議，在Live App與家庭媒體中心之間我們規定了一套控制協議來實現諸如節目列表獲取，視頻播放等控制命令。
react-native-tcp使用到的API
- Socket() 用來創建套接字
- connect() 用來套接字的連接
- write() 用來發送信息
- on() 用來接收信息
在使用react-native-tcp是遇到Object Null的問題，可以按照issue中提供的思路解決。
總結
作為一位前端開發者，在初次接觸RN的時候會被android和IOS開發環境的搭建，編譯過程以及編譯報錯而嚇到，但是當你對開發環境稍許了解后你會發現這真是一種特別棒的開發體驗。對公司或部門來說RN提供了新的解決方案，對于前端開發者來說相當于又有了新的戰場。
在使用第三方庫餓過程中我們很可能會遇到各種各樣的坑，這里建議遇到問題后首先到github上查看相關issue，大部分問題都可以在這里得到答案。
Live App已經實現了我們的主要應用場景，這足以證明在我們的應用場景下使用RN開發應用是更高效的一種開發方式。
