邓雯雯 冯颖凌

摘要：随着移动互联网的迅速发展，移动应用带来的便利使人们慢慢开始改变自己的生活习惯。微信、支付宝的普及打开了移动支付的大门，淘宝、京东等软件引领了全民网购的潮流，钉钉、腾讯课堂、慕课网等教育应用开启了网课时代，移动互联网正在慢慢地渗透进人们的生活中。本课题以React-Native为框架，提供一个具有多功能和信息内容的移动跨平台应用。该应用主要包含登录注册模块、热门推荐模块、签到模块、天气预报模块以及课表模块。本文通过对需求的分析和功能的实现进行的阐述，以模块化和组件化的思想对应用的功能进行独立的划分，实现代码的低耦合高内聚。同时对React Native 的启动白屏问题提出了解决思路和优化方案。

关键词：react-native;校园;移动;应用

中图分类号：TP391       文献标识码：A

文章编号：1009-3044（2020）36-0243-03

1 引言

在传统开发中，为了兼容Android操作系统和iOS操作系统的移动设备，一款app应用需要分两次开发，由于在不同客户端平台下要求的技术不同，所以企业需要花费大量的人力成本和研发成本，而且每次应用更新都要双端同步，这使得维护成本也大大提高。

而React Native 框架的出现恰好解决了上述的问题，React Native的跨平台性能够让一套代码运行在两种系统上，前端开发人员只需要通过JavaScript开发业务代码，并不需要额外地去学习客户端技术，这样就大大降低了开发人员的学习成本并且增强了移动应用的可扩展性。而且React Native和原生移动应用在使用感受上十分相似，甚至可以说是无法区分差别的[[1]]。

随着信息越来越多元化，在如今校园中，移动校园app无疑是一个信息整合的高效、統一的渠道。因此，本课题选取React Native为框架，基于解决当前校内大学生实际生活需求和生活习惯，提供一个具有多功能和信息内容的跨平台移动应用。

2 主要技术与实现

2.1 主要技术

本课题研究内容是基于React Native框架的移动校园app，该应用客户端主要包含登录注册模块、热门推荐模块、签到模块、天气预报模块以及课表模块。

以模块化思想划分功能，这样每个模块都是一个独立的功能，可以减少代码的耦合性，提高代码质量，并且使结构更加清晰，利于后期维护。

后端使用技术栈： Node.js + Express+ Mongoose

图形化管理工具—Robo 3T

分析思路：

1）用express框架搭建一个web应用程序，提供数据接口。

2）Mongoose数据库基于scheme结构去定义了一种直接的数据模型。

分析思路：

用express框架搭建一个web应用程序，提供数据接口。

Mongoose数据库基于scheme结构去定义了一种直接的数据模型。

2.2 React Native框架的原理和通信

React Native使用JSX来描述用户界面，但UI组件渲染、动画效果、网络请求等都是通过原生实现的，开发人员编写JavaScript业务代码，通过React Native的中间层对调用原生控件，获得与原生应用一致的用户体验[[3]]。在Android平台下，React Native主要是由C++层、Java层、JavaScript层组成。

C++实现的动态链接库作为中间适配层桥接，实现了JavaScript与Java层的双向通信。这里主要是C++层封装的JavaScriptCore组件执行了JavaScript代码的解析，同时完全隔离了Java层和JavaScript层，开发人员只需要专注于JavaScript的代码实现[[4]]。

Java层是ReactNative框架加载和启动的入口，它封装了负责React Native与Native code通信的Bridge组件。通过启动C++层的JavaScript解释器，然后JavaScriptCore解析执行JavaScript代码，然后把计算好的结果返回给Native code，然后Native code驱动设备上的硬件。因此通过Bridge组件，让JavaScript能够调用丰富的原生接口，充分发挥硬件的能力，优化应用性能。原生接口包括图片资源访问、图形图像绘制、3D加速、网络请求、震动效果、原生控件绘制、地图、定位、通知等。

3 模块的分析与实现

3.1  登录注册模块的分析与实现

实现思路：

1）在服务器连接mongoose数据库，创建User模型。数据库中结构如下：

2）设置一个变量isSignIn，默认是true，通过控制这个变量，切换组件的样式以及将用填写的信息传给不同的函数，执行不同的方法。这样可以实现组件和代码的复用。

3）如果isSignIn的值是false，说明用户想要注册账号，则把数据传给服务端，服务端将数据存入数据库中。如果isSignIn的值是true，说明用户想要登录账号，则把数据传给服务端，服务端在数据库查找，找到的话就说明登录成功。

4）通过react-navigation（路由）进行页面跳转，之后的页面跳转实现也是如此。

3.2首页模块的分析与实现

实现思路：

1） 轮播图使用了react-native-swiper插件。

2） 子菜单中每一个跳转按钮复用同一个组件，只需要改变每次传入的参数即可。子菜单用一个数组记录，里面存放数据是对象。

3） 同理，长列表中每一栏也可以复用同一个组件，UI组件随着传入的参数渲染出不同的内容。然后在每次渲染前，获取当前日期时间，并且使用正则转换数据格式，渲染出获取数据的日期时间。

4） 点击热门模块的某一项，发送路由跳转。同时将id值传入请求数据的接口。

3.3课表模块的分析与设计

分析需求：

1）以表格的形式展示课表信息，每一行对应特定时间段的课表信息，每一列对应日期当天的课表信息。

2）能够修改并更新课表信息。

实现思路：

1） 在服务端链接mongoose数据库，创建Timetable的模型。

2） 使用flex布局，将主轴方向水平方向（默认是垂直的）。根据课表是一个二维数组，所以用两个循环语句把课表的行和列的内容都渲染出来，并且数据块不为空，将不同的行绑定不同的颜色。

3） 用一个变量控制课表的状态，通过点击修改，会将替换表格中的UI组件，将组件替换成，这样就可以编辑文本了。

3.4天气预报模块的分析与设计

分析需求：

天气预报模块包含以下模块：

1） 实现天气头部模块;

2） 实现小时天气模块;

3） 实现每日天气模块;

4） 实现空气质量模块;

5） 实现生活指数模块。

功能：获取并展示定位地点的天气信息并且可以切换不同地区。

实现思路：

1） 初始化页面的时候，检查是否有定位权限，如果有，则说明定位成功，触发回调函数，去请求数据，如果没有，则触发请求定位权限的回调函数，经过用户确认后，同意则去触发请求数据的回调函数。

2） 将请求的返回的数据进行整理，保存天气信息的对象。

3） 通过属性传值的方式，将数据传入都对应的模块中，渲染UI组件。

4） 点击头部地区的时候，会触发选择器。

通过自定义子组件属性，绑定父组件自身作用域的方法，在这里是获取天气信息的方法，在子组件的事件回调中执行这个方法，从而获取新的天气信息，更新整个天气组件。

4 分析与总结

本论文分析并实现了基于React Native框架的跨平台移动校园App。

App基于React Native 框架开发，外部封装Java、Objective-C，内部封装JavaScript。通过Bridge实现React Native与Native code的通信，实现线程模型等，并通过JavaScriptCore解析JS代码，调用原生控件，渲染视图。通过JS映射模块的方式来构建原生View，并将组合携带的数据绑定到ReactView，通过把ReactView添加到具体Activity中，让Activity对应一个生命周期。

本论文的主要开发有：客户端所有的UI组件设计、服务端的部分接口、登录注册模块、首页模块、签到模塊、课表模块、天气预报模块等。

参考文献：

[1] 冯博.基于React Native框架的兴趣社区Android客户端设计与实现[D].哈尔滨：哈尔滨工业大学，2017.

[2] 潘婷婷.React Native在APP开发中的应用研究[J].无线互联科技，2016（19）：142-143.

[3] 程化梅.基于React Native的即时通讯应用的设计与实现[D].武汉：武汉邮电科学研究院，2017：31-33.

[4] 李骁，张丹.基于混合模式的移动开发技术的研究[C]//决策论坛——企业管理模式创新学术研讨会论文集.北京，2017：118-120.

[5] 严新巧.基于移动开发现状探讨React Native[J].电脑知识与技术，2016，12（32）：76-77，82.

[6] Steven Max Patterson. Facebook's React Native could succeed where other cross-platform frameworks have failed[J]. Network World （Online），2016：52-54.

[7] 王阅蓁.移动应用的web与native混合编程模式研究与实现[D].成都：电子科技大学，2015.

【通联编辑：唐一东】