React Native(以下簡(jiǎn)稱RN)給我們提供了一種開(kāi)發(fā)原生應(yīng)用的新方案，它允許我們用前端語(yǔ)言開(kāi)發(fā)跨平臺(tái)的原生應(yīng)用石挂，對(duì)于熟悉前端的開(kāi)發(fā)人員來(lái)說(shuō)可以用極低的成本開(kāi)發(fā)原生應(yīng)用崔泵。目前已經(jīng)有眾多線上案例舞萄。
一: 項(xiàng)目介紹
本文介紹的是基于RN實(shí)現(xiàn)的一款在特殊應(yīng)用場(chǎng)景下的視頻直播APP(以下稱為L(zhǎng)ive App)，實(shí)現(xiàn)的功能有：
- 基于HLS的視頻直播
- 基于Socket的私有協(xié)議
- 節(jié)目分類信息展示
- 節(jié)目列表展示
- 播放歷史展示
-
Android+IOS平臺(tái)支持
全屏.png
應(yīng)用場(chǎng)景
注：家庭媒體中心是我們應(yīng)用場(chǎng)景下的server,可以理解成用戶家中的機(jī)頂盒
家庭媒體中心自帶路由功能管削，手機(jī)端通過(guò)WLAN連接到家庭媒體中心倒脓，至此Live App就可以從家庭媒體中心獲取頻道列表以及建立基于Socket的連接，實(shí)現(xiàn)App與家庭媒體中心的控制連接含思。
二: 第三方庫(kù)
目前Live App使用到的第三方庫(kù)主要有：
- 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
為了做到跨平臺(tái)崎弃，在第三方庫(kù)選用的時(shí)候一定要注意其是否支持跨平臺(tái)，不要將平臺(tái)兼容性問(wèn)題都遺留到測(cè)試階段含潘。
三: react-native-video使用介紹
RN本身并沒(méi)有提供原生的視頻播放組件饲做，這里我們使用官方推薦的第三方視頻播放組件react-native-video。
在使用react-native-video庫(kù)遏弱。
react-native-video源碼中提供的三個(gè)主要文件android-exoplayer,android,ios盆均。
安卓平臺(tái)下實(shí)現(xiàn)基于HLS的視頻直播我們應(yīng)該使用android-exoplayer，官方對(duì)其的介紹是：
- 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提供的功能漱逸，需要設(shè)置文件android/settings.gradle
include ':react-native-video'
project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android-exoplayer')
至于IOS平臺(tái)可按官方文檔中介紹的使用泪姨。
四：react-native-tcp使用介紹
使用react-native-tcp的目的是實(shí)現(xiàn)基于Socket的私有協(xié)議，在Live App與家庭媒體中心之間我們規(guī)定了一套控制協(xié)議來(lái)實(shí)現(xiàn)諸如節(jié)目列表獲取饰抒，視頻播放等控制命令肮砾。
react-native-tcp使用到的API
- Socket() 用來(lái)創(chuàng)建套接字
- connect() 用來(lái)套接字的連接
- write() 用來(lái)發(fā)送信息
- on() 用來(lái)接收信息
在使用react-native-tcp是遇到Object Null的問(wèn)題，可以按照issue中提供的思路解決袋坑。
總結(jié)
作為一位前端開(kāi)發(fā)者仗处，在初次接觸RN的時(shí)候會(huì)被android和IOS開(kāi)發(fā)環(huán)境的搭建，編譯過(guò)程以及編譯報(bào)錯(cuò)而嚇到枣宫，但是當(dāng)你對(duì)開(kāi)發(fā)環(huán)境稍許了解后你會(huì)發(fā)現(xiàn)這真是一種特別棒的開(kāi)發(fā)體驗(yàn)婆誓。對(duì)公司或部門來(lái)說(shuō)RN提供了新的解決方案，對(duì)于前端開(kāi)發(fā)者來(lái)說(shuō)相當(dāng)于又有了新的戰(zhàn)場(chǎng)也颤。
在使用第三方庫(kù)餓過(guò)程中我們很可能會(huì)遇到各種各樣的坑洋幻，這里建議遇到問(wèn)題后首先到github上查看相關(guān)issue，大部分問(wèn)題都可以在這里得到答案歇拆。
Live App已經(jīng)實(shí)現(xiàn)了我們的主要應(yīng)用場(chǎng)景鞋屈，這足以證明在我們的應(yīng)用場(chǎng)景下使用RN開(kāi)發(fā)應(yīng)用是更高效的一種開(kāi)發(fā)方式范咨。
