移动校园生活帮之轻松校园行

电子商务与电子政务
本栏目责任编辑：李雅琪
移动校园生活帮之轻松校园行
邓雯雯，冯颖凌
（南通大学理学院，江苏南通226009）
摘要：随着移动互联网的迅速发展，移动应用带来的便利使人们慢慢开始改变自己的生活习惯。

微信、支付宝的普及打开了移动支付的大门，淘宝、京东等软件引领了全民网购的潮流，钉钉、腾讯课堂、慕课网等教育应用开启了网课时代，移动互联网正在慢慢地渗透进人们的生活中。

本课题以React-Native 为框架，提供一个具有多功能和信息内容的移动跨平台应用。

该应用主要包含登录注册模块、热门推荐模块、签到模块、天气预报模块以及课表模块。

本文通过对需求的分析和功能的实现进行的阐述，以模块化和组件化的思想对应用的功能进行独立的划分，实现代码的低耦合高内聚。

同时对React Na⁃
tive 的启动白屏问题提出了解决思路和优化方案。

关键词：react-native ；校园；移动；应用中图分类号：TP391
文献标识码：A
文章编号：1009-3044(2020)36-0243-03
开放科学(资源服务)标识码(OSID):
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 应用程序，提供数据接口。

收稿日期：2020-06-30
作者简介：邓雯雯（1999—），女，广东茂名人，本科在读，主要研究方向为信息技术与应用；冯颖凌（1978—），女，江苏南通人，硕士，
主要研究方向计算机应用。

243
本栏目责任编辑：李雅琪
电子商务与电子政务
Computer Knowledge and Technology 电脑知识与技术第16卷第36期(2020年12月)
Mongoose 数据库基于scheme 结构去定义了一种直接的数
据模型。

2.2React Native 框架的原理和通信
React Native 使用JSX 来描述用户界面，但UI 组件渲染、动
画效果、网络请求等都是通过原生实现的，开发人员编写JavaS⁃cript 业务代码，通过React Native 的中间层对调用原生控件，获
得与原生应用一致的用户体验[3]。

在Android 平台下，React Native 主要是由C++层、Java 层、JavaScript 层组成。

C++实现的动态链接库作为中间适配层桥接，实现了Ja⁃
vaScript 与Java 层的双向通信。

这里主要是C++层封装的Ja⁃
vaScriptCore 组件执行了JavaScript 代码的解析，同时完全隔离了Java 层和JavaScript 层，开发人员只需要专注于JavaScript 的代码实现[4]。

Java 层是ReactNative 框架加载和启动的入口，它封装了负
责React Native 与Native code 通信的Bridge 组件。

通过启动C++层的JavaScript 解释器，然后JavaScriptCore 解析执行JavaS⁃cript 代码，然后把计算好的结果返回给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 组件，将<Text>组件替换成<TextInput>，这样就可
以编辑文本了。

3.4天气预报模块的分析与设计
分析需求：
天气预报模块包含以下模块：1)实现天气头部模块；2)实现小时天气模块；3)实现每日天气模块；
244
电子商务与电子政务
本栏目责任编辑：李雅琪Computer Knowledge and Technology 电脑知识与技术
第16卷第36期(2020年12月)
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 ，通过把Re⁃actView 添加到具体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.【通联编辑：唐一东】
245。