基于ReactNative跨平臺開發框架的網絡存儲應用的設計與實現

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

一、前言

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

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

二、系統設計

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

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

圖1 ReactNative調用結構圖

三、系統功能

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

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

圖2 應用功能圖

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

四、關鍵技術

根據本移動應用的需求，結合ReactNative技術，開發基于RN的網絡存儲應用。本移動應用的關鍵技術主要有以下兩點：

（一）與服務器通信

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

網盤服務器返回的數據是XML格式的，ReactNative的組件使用的是json格式，因此需要將XML數據轉化為json數據，主要偽代碼如下：

使用XML數據.replace()方法將XML數據特有的“<”“>”“&”轉義。

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

圖3 用戶文檔列表

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

（二）搜索文檔

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

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

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

五、總結

圖4 搜索文檔

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