基于ReactNative跨平臺開發(fā)框架的網(wǎng)絡存儲應用的設計與實現(xiàn)

（廣西廣播電視技術中心）

一、前言

移動設備的快速發(fā)展，使人們可以通過微小的手機探索互聯(lián)網(wǎng)，也催生了移動互聯(lián)網(wǎng)的高速發(fā)展，各類功能齊全的移動應用如雨后春筍層出不迭，大大地豐富了人們的工作與生活。現(xiàn)今，谷歌公司的Android系統(tǒng)和蘋果公司的IOS系統(tǒng)占據(jù)了移動設備的手機系統(tǒng)大半江山，市場上幾乎每個移動應用都開發(fā)了適配這兩種手機系統(tǒng)的版本。

隨著手機系統(tǒng)的不斷更新，移動應用對手機系統(tǒng)的適配性要求提升，人力成本和開發(fā)成本也隨之增加。在移動開發(fā)中，常見的有Web app和 Native app，前者開發(fā)雖然快速，但是性能低下，穩(wěn)定性差且占用較大資源；后者運行效率快，占用內(nèi)存小，常常被作為開發(fā)手機應用的首選方式，但是學習、人力、物力成本較大。基于以上原因，聞名世界的FaceBook公司于2015年開源的跨平臺移動應用開發(fā)框架ReactNative，可實現(xiàn)一次開發(fā)即可在Android和IOS兩大平臺平穩(wěn)使用的效果，使熟悉Web前端的開發(fā)人員可快速開發(fā)出與Native app不相上下的移動應用。

二、系統(tǒng)設計

ReactNative跨平臺開發(fā)框架是一個可構造web式交互界面的javascript組件庫，通過javascript引擎與IOS和Android原生代碼進行通信，具有熱更新功能，運行效率比基于HTML5、CSS等技術的PhoneGap、AppCan高。

ReactNative將組件封裝，初始化一個狀態(tài)(state)，通過用戶的操作導致此狀態(tài)發(fā)生變化，繼而重新渲染UI，將不同界面通過CSS布局呈現(xiàn)給用戶。具體原理是開發(fā)平臺提供特有的javascript引擎，當ReactNative初始化運行時，將在原生代碼中定義好的模塊和模塊方法創(chuàng)建成一份配置表傳給javascript，使javascript獲取到可調(diào)用的原生模塊的命名與方法，與原生代碼相互調(diào)用。IOS平臺提供javascript Core的引擎框架，Android提供Google v8引擎框架來與ReactNative進行交互通信，使javascript運行庫訪問操作系統(tǒng)的底層來達到使用Android或iOS的本地組件來做UI渲染的目的。Js與原生代碼相互調(diào)用的結(jié)構圖如圖1所示。

圖1 ReactNative調(diào)用結(jié)構圖

三、系統(tǒng)功能

網(wǎng)盤服務器采用WebService技術，設計了用戶名密碼判斷、返回文件列表、文件復制刪除剪切等接口，本移動應用通過與網(wǎng)盤服務器接口對接獲取數(shù)據(jù)，將數(shù)據(jù)通過ReactNative的組件展示在手機客戶端中，使用戶可以隨時隨地搜索查看下載所需的文檔。目前此移動應用已在蘋果商店中上架，供技術中心全體職工使用。

應用的主要功能如圖2所示。

圖2 應用功能圖

當用戶啟動應用程序，輸入個人信息登錄后，可搜索查看用戶存放在服務器上的所有文檔，并可以將選中的文檔進行分享和下載到其他手機應用中。

四、關鍵技術

根據(jù)本移動應用的需求，結(jié)合ReactNative技術，開發(fā)基于RN的網(wǎng)絡存儲應用。本移動應用的關鍵技術主要有以下兩點：

（一）與服務器通信

網(wǎng)盤服務器的通信接口采用WebService技術，返回的數(shù)據(jù)是XML格式。ReactNative中默認使用fetch函數(shù)來獲取數(shù)據(jù)。fetch是一種HTTP數(shù)據(jù)請求的方式，可以簡單快捷的跨網(wǎng)絡異步獲取資源。Fetch()不是ajax封裝，也不是XMLHttpRequest對象。傳統(tǒng)的XMLHttpRequest沒有關注分離原則，配置和調(diào)用方式混亂，而fetch語法簡潔，支持async/await且同構方便。本移動應用中與網(wǎng)盤服務器接口對接的主要偽代碼如下：

網(wǎng)盤服務器返回的數(shù)據(jù)是XML格式的，ReactNative的組件使用的是json格式，因此需要將XML數(shù)據(jù)轉(zhuǎn)化為json數(shù)據(jù)，主要偽代碼如下：

使用XML數(shù)據(jù).replace()方法將XML數(shù)據(jù)特有的“<”“>”“&”轉(zhuǎn)義。

for循環(huán)處理arr數(shù)組{根據(jù)XML數(shù)據(jù)格式，找到兩個閉合字段，將閉合字段和閉合字段間的數(shù)據(jù)以鍵值對的方式存進json對象中。}

圖3 用戶文檔列表

將json數(shù)據(jù)通過FlatList組件展示，文檔列表界面如圖3所示。

（二）搜索文檔

搜索框存在于列表界面，可以對所有文件進行實時模糊搜索。因為ReactNative的渲染機制是根據(jù)狀態(tài)（state）是否改變來自動啟動的,所以搜索框功能實現(xiàn)的主要思路是當在搜索框組件輸入文字的時候調(diào)用組件的onChangText方法，將狀態(tài)(state)中的數(shù)據(jù)屬性的值與當前輸入的文字進行for循環(huán)比較，找到比較結(jié)果一致的數(shù)據(jù)集合，重新賦值給狀態(tài)(state)的數(shù)據(jù)屬性，繼而引起列表控件重新渲染，顯示出實時搜索結(jié)果。主要偽代碼如下：

FlatList組件的渲染函數(shù)renderItem()將會根據(jù)狀態(tài)state的數(shù)據(jù)屬性值進行重新渲染。

搜索框功能如下圖4所示。

五、總結(jié)

圖4 搜索文檔

本移動應用采用性能高效的ReactNative跨平臺開發(fā)框架，將用戶存儲在企業(yè)服務器的各類文檔數(shù)據(jù)以列表的形式展示在手機客戶端中，提供文檔搜索預覽、分享下載的功能，方便用戶隨時查看、提取所需文檔，減少了開發(fā)移動應用的成本，進一步完善移動辦公的需求。