基于React Native的智慧吉首APP的设计与实现

陈宇收

摘要

智慧吉首APP在设计实现时，为了在降低APP开发复杂度、提升其开发的效率的同时，兼顾原生移动应用的优势，采用了React Native技术实现。由于React Native技术在设计时是基于JavaScript与React的类原生移动应用，并提供了Android与IOS的兼容支持，所以基于其设计实现的智慧吉首APP具备开发效率高、运行效率快以及安全稳定等特点，因此具备较高的研究价值。

【关键词】React Native 智慧吉首 APP

1 引言

随着移动互联网技术的发展，由于其具备高效、便捷、灵活等特点，导致越来越的人群依赖于移动终端设备完成日常的网络访问及业务处理，在这一发展趋势下，为了提升吉首市的城市形象，根据吉首智慧城市建设规划，需要建设智慧吉首APP完成对吉首市城市形象的宣传。在智慧吉首APP建设时，根据当前移动终端技术的不同，分为原生开发与基于通用框架的二次开发两种类型，其中使用原生技术开发的APP虽然具备较高的运行性能，但是由于Android与IOS原生开发的不兼容性，所以会成倍增加开发的工作量;通过基于通用框架的二次开发，虽然能够实现Android与IOS版本的兼容开发，提高开发的效率，但是却会导致APP的运行性能存在下降，所以在智慧吉首APP设计时，如何选择合适的技术手段，在保障APP开发效率的同时，不降低其运行的性能已经成为了关键。React Native技术的出现，由于其是基于JavaScript与React的类原生移动应用，不但能够兼容Android与IOS的开发需求，而且还提供了接近原生的性能支持，所以已经成为当前移动开发的新方向。

2 智慧吉首APP概述

智慧吉首APP在设计实现时，其目的是以智慧吉首APP为载体，实现对吉首城市形象的综合性宣传、管理，为城市民居提供便捷、可靠的服务支撑，包括资讯、教育、出行、旅游、娱乐、生活等，进而在方便城市居民更好的了解城市发展的同时，也为建设美丽吉首、科技吉首、生态吉首以及最终实现智慧吉首的目标提供支持。

智慧吉首APP在实现时，根据当前移动终端应用技术的不同，设计兼容Android与IOS两个不同版本，并提供APP的在线升级服务。另外，根据智慧吉首APP建设规划，设计提供首页、资讯、模块、交友以及我的五大功能，其中首页主要显示APP提供的最主要服务以及新闻资讯内容;资讯主要根据新闻类别的不同展示新闻内容;模块主要提供各应用服务的导航，包括智慧公交、智慧旅游以及实时路况等应用，天气、电影、酒店等生活应用;交友则是提供个人魅力展示的平台;我的主要负责个人信息的维护。

3 智慧吉首APP设计

根据智慧吉首APP建设规划，其需要兼容Android与IOS两个版本，所以其在设计时，不但要考虑功能组织的合理性，而且还要考虑兼容开发的差异性，因此，在程序目录结构设计时做出如下约定：

（一）原生IOS及Android实现均放在各自文件目录内;

（2）在src目录下创建公共资源目录assets、公共组件目录components、原生交互目录nativeHelper、网络请求目录network、样式目录styles以及工具目录mils等;

（3）在src下创建公共资源常量Constant.js以及导航控制对象NavigationServicejs;

在完成APP资源目录创建后，为了提高数据交互的效率、质量及简便性，要求提供数据服务的各数据接口均以JSON格式完成数据交互。

4 智慧吉首APP实现

在智慧吉首APP实现时，根据ReactNative开发需要安装好各类依赖环境后，使用react-native initsmart_jishou命令对项目执行初始化，然后根据系统设计规划，创建各个资源文件目录及文件，完成系统框架的搭建。

在完成程序框架搭建后，根据智慧吉首APP业务需求，编码实现其数据服务接口与APP数据展示界面，其中为了保障导航功能的稳定、可靠，使用了react-native-navigation组件提供支持。另外，為了保障系统编码实现时能够快速完成测试，使用夜神模拟器完成Android终端的业务测试、使用Xcode完成IOS端的业务测试。

在完成智慧吉首APP测试完善后，为了给用户提供便捷的下载、安装支持，就需要对其进行发布成正式版本，其中在Android版本发布时，首先要将系统实现过程中的各种资源打包成Android本地资源，进而加快系统访问效率，执行命令为：

react-native bundle--platform android--devfalse--entry-file indexjs--bundle-output android/app/src/main/assets/index.android.bundle--assets-dest android/app/src/main/res/

在完成资源打包后，使用Android Studio工具打开React Native项目的Android目录，然后执行生成签名APK，并配置相关参数即可，系统会导出当前应用的签名APK文件，最后将此APK发布到应用市场即可。

在智慧吉首APP IOS版本发布时，使用Xcode打开React Native项目的IOS目录，并使用AppIcon配置应用展示图、使用LaunchImage配置应用引导图。由于IOS默认关闭了部分服务，所以首先需要将APP需要的服务开启，包括http请求、位置授权、相册授权以及相机授权等，然后执行IOS版本资源打包命令：

react-native bundle--entry-file./index.js--bundle-output./ios/bundle/index.ios.jsbundle--latform ios--assets-dest./ios/bundle--dev false

在完成IOS版本资源打包后，需要手动将打包图片资源asstes与脚本资源index.ios.jsbundle引入到项目路径，并使用react-native-splash-screen插件解决APP启动时加载白屏Ih1题，然后使用archive命令导出苹果APPStore支持的ipa资源文件，并使用application loader工具实现对打包资源的上传审核。当审核通过后即可以通过苹果APPStore完成智慧吉首APP IOS版本的下载及应用。

智慧吉首APPAndroid应用如图1（左），IOS应用如图1（右）。

5 总结

为了提高智慧吉首APP的开发效率及质量，本文选择使用React Native技术对其进行Android与IOS兼容开发，由于React Native技术是基于JavaScript与React的类原生移动应用，所以其兼顾了原生开发的性能与框架开发的高效，最终为智慧吉首APP的应用提供高质量的保障。

参考文献

[1]焦锋.react native在app开发中的应用研究[J].数字技术与应用，2017（06）：109.

[2]钟爱青.基于React Native的校园二手物品竞拍平台的设计与实现[J].电脑知识与技术，2018（16）：89-94.