React Native(以下簡(jiǎn)稱RN)給我們提供了一種開發(fā)原生應(yīng)用的新方案，它允許我們用前端語(yǔ)言開發(fā)跨平臺(tái)的原生應(yīng)用，對(duì)于熟悉前端的開發(fā)人員來說可以用極低的成本開發(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)景.png

家庭媒體中心自帶路由功能，手機(jī)端通過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)兼容性問題都遺留到測(cè)試階段。

三: react-native-video使用介紹

RN本身并沒有提供原生的視頻播放組件，這里我們使用官方推薦的第三方視頻播放組件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é)議來實(shí)現(xiàn)諸如節(jié)目列表獲取，視頻播放等控制命令。
react-native-tcp使用到的API

• Socket() 用來創(chuàng)建套接字
• connect() 用來套接字的連接
• write() 用來發(fā)送信息
• on() 用來接收信息

在使用react-native-tcp是遇到Object Null的問題，可以按照issue中提供的思路解決。

總結(jié)

作為一位前端開發(fā)者，在初次接觸RN的時(shí)候會(huì)被android和IOS開發(fā)環(huán)境的搭建，編譯過程以及編譯報(bào)錯(cuò)而嚇到，但是當(dāng)你對(duì)開發(fā)環(huán)境稍許了解后你會(huì)發(fā)現(xiàn)這真是一種特別棒的開發(fā)體驗(yàn)。對(duì)公司或部門來說RN提供了新的解決方案，對(duì)于前端開發(fā)者來說相當(dāng)于又有了新的戰(zhàn)場(chǎng)。

在使用第三方庫(kù)餓過程中我們很可能會(huì)遇到各種各樣的坑，這里建議遇到問題后首先到github上查看相關(guān)issue，大部分問題都可以在這里得到答案。

Live App已經(jīng)實(shí)現(xiàn)了我們的主要應(yīng)用場(chǎng)景，這足以證明在我們的應(yīng)用場(chǎng)景下使用RN開發(fā)應(yīng)用是更高效的一種開發(fā)方式。