基于ReactNative跨平台开发框架的网络存储应用的设计与实现

2020-06-11

视听 2020年3期

（广西广播电视技术中心）

一、前言

移动设备的快速发展，使人们可以通过微小的手机探索互联网，也催生了移动互联网的高速发展，各类功能齐全的移动应用如雨后春笋层出不迭，大大地丰富了人们的工作与生活。现今，谷歌公司的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)的数据属性，继而引起列表控件重新渲染，显示出实时搜索结果。主要伪代码如下：