基于React Native的智慧吉首APP的設(shè)計(jì)與實(shí)現(xiàn)

陳宇收

摘要

智慧吉首APP在設(shè)計(jì)實(shí)現(xiàn)時(shí)，為了在降低APP開發(fā)復(fù)雜度、提升其開發(fā)的效率的同時(shí)，兼顧原生移動(dòng)應(yīng)用的優(yōu)勢(shì)，采用了React Native技術(shù)實(shí)現(xiàn)。由于React Native技術(shù)在設(shè)計(jì)時(shí)是基于JavaScript與React的類原生移動(dòng)應(yīng)用，并提供了Android與IOS的兼容支持，所以基于其設(shè)計(jì)實(shí)現(xiàn)的智慧吉首APP具備開發(fā)效率高、運(yùn)行效率快以及安全穩(wěn)定等特點(diǎn)，因此具備較高的研究價(jià)值。

【關(guān)鍵詞】React Native 智慧吉首 APP

1 引言

隨著移動(dòng)互聯(lián)網(wǎng)技術(shù)的發(fā)展，由于其具備高效、便捷、靈活等特點(diǎn)，導(dǎo)致越來越的人群依賴于移動(dòng)終端設(shè)備完成日常的網(wǎng)絡(luò)訪問及業(yè)務(wù)處理，在這一發(fā)展趨勢(shì)下，為了提升吉首市的城市形象，根據(jù)吉首智慧城市建設(shè)規(guī)劃，需要建設(shè)智慧吉首APP完成對(duì)吉首市城市形象的宣傳。在智慧吉首APP建設(shè)時(shí)，根據(jù)當(dāng)前移動(dòng)終端技術(shù)的不同，分為原生開發(fā)與基于通用框架的二次開發(fā)兩種類型，其中使用原生技術(shù)開發(fā)的APP雖然具備較高的運(yùn)行性能，但是由于Android與IOS原生開發(fā)的不兼容性，所以會(huì)成倍增加開發(fā)的工作量;通過基于通用框架的二次開發(fā)，雖然能夠?qū)崿F(xiàn)Android與IOS版本的兼容開發(fā)，提高開發(fā)的效率，但是卻會(huì)導(dǎo)致APP的運(yùn)行性能存在下降，所以在智慧吉首APP設(shè)計(jì)時(shí)，如何選擇合適的技術(shù)手段，在保障APP開發(fā)效率的同時(shí)，不降低其運(yùn)行的性能已經(jīng)成為了關(guān)鍵。React Native技術(shù)的出現(xiàn)，由于其是基于JavaScript與React的類原生移動(dòng)應(yīng)用，不但能夠兼容Android與IOS的開發(fā)需求，而且還提供了接近原生的性能支持，所以已經(jīng)成為當(dāng)前移動(dòng)開發(fā)的新方向。

2 智慧吉首APP概述

智慧吉首APP在設(shè)計(jì)實(shí)現(xiàn)時(shí)，其目的是以智慧吉首APP為載體，實(shí)現(xiàn)對(duì)吉首城市形象的綜合性宣傳、管理，為城市民居提供便捷、可靠的服務(wù)支撐，包括資訊、教育、出行、旅游、娛樂、生活等，進(jìn)而在方便城市居民更好的了解城市發(fā)展的同時(shí)，也為建設(shè)美麗吉首、科技吉首、生態(tài)吉首以及最終實(shí)現(xiàn)智慧吉首的目標(biāo)提供支持。

智慧吉首APP在實(shí)現(xiàn)時(shí)，根據(jù)當(dāng)前移動(dòng)終端應(yīng)用技術(shù)的不同，設(shè)計(jì)兼容Android與IOS兩個(gè)不同版本，并提供APP的在線升級(jí)服務(wù)。另外，根據(jù)智慧吉首APP建設(shè)規(guī)劃，設(shè)計(jì)提供首頁、資訊、模塊、交友以及我的五大功能，其中首頁主要顯示APP提供的最主要服務(wù)以及新聞資訊內(nèi)容;資訊主要根據(jù)新聞?lì)悇e的不同展示新聞內(nèi)容;模塊主要提供各應(yīng)用服務(wù)的導(dǎo)航，包括智慧公交、智慧旅游以及實(shí)時(shí)路況等應(yīng)用，天氣、電影、酒店等生活應(yīng)用;交友則是提供個(gè)人魅力展示的平臺(tái);我的主要負(fù)責(zé)個(gè)人信息的維護(hù)。

3 智慧吉首APP設(shè)計(jì)

根據(jù)智慧吉首APP建設(shè)規(guī)劃，其需要兼容Android與IOS兩個(gè)版本，所以其在設(shè)計(jì)時(shí)，不但要考慮功能組織的合理性，而且還要考慮兼容開發(fā)的差異性，因此，在程序目錄結(jié)構(gòu)設(shè)計(jì)時(shí)做出如下約定：

（一）原生IOS及Android實(shí)現(xiàn)均放在各自文件目錄內(nèi);

（2）在src目錄下創(chuàng)建公共資源目錄assets、公共組件目錄components、原生交互目錄nativeHelper、網(wǎng)絡(luò)請(qǐng)求目錄network、樣式目錄styles以及工具目錄mils等;

（3）在src下創(chuàng)建公共資源常量Constant.js以及導(dǎo)航控制對(duì)象NavigationServicejs;

在完成APP資源目錄創(chuàng)建后，為了提高數(shù)據(jù)交互的效率、質(zhì)量及簡便性，要求提供數(shù)據(jù)服務(wù)的各數(shù)據(jù)接口均以JSON格式完成數(shù)據(jù)交互。

4 智慧吉首APP實(shí)現(xiàn)

在智慧吉首APP實(shí)現(xiàn)時(shí)，根據(jù)ReactNative開發(fā)需要安裝好各類依賴環(huán)境后，使用react-native initsmart_jishou命令對(duì)項(xiàng)目執(zhí)行初始化，然后根據(jù)系統(tǒng)設(shè)計(jì)規(guī)劃，創(chuàng)建各個(gè)資源文件目錄及文件，完成系統(tǒng)框架的搭建。

在完成程序框架搭建后，根據(jù)智慧吉首APP業(yè)務(wù)需求，編碼實(shí)現(xiàn)其數(shù)據(jù)服務(wù)接口與APP數(shù)據(jù)展示界面，其中為了保障導(dǎo)航功能的穩(wěn)定、可靠，使用了react-native-navigation組件提供支持。另外，為了保障系統(tǒng)編碼實(shí)現(xiàn)時(shí)能夠快速完成測(cè)試，使用夜神模擬器完成Android終端的業(yè)務(wù)測(cè)試、使用Xcode完成IOS端的業(yè)務(wù)測(cè)試。

在完成智慧吉首APP測(cè)試完善后，為了給用戶提供便捷的下載、安裝支持，就需要對(duì)其進(jìn)行發(fā)布成正式版本，其中在Android版本發(fā)布時(shí)，首先要將系統(tǒng)實(shí)現(xiàn)過程中的各種資源打包成Android本地資源，進(jìn)而加快系統(tǒng)訪問效率，執(zhí)行命令為：

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項(xiàng)目的Android目錄，然后執(zhí)行生成簽名APK，并配置相關(guān)參數(shù)即可，系統(tǒng)會(huì)導(dǎo)出當(dāng)前應(yīng)用的簽名APK文件，最后將此APK發(fā)布到應(yīng)用市場即可。

在智慧吉首APP IOS版本發(fā)布時(shí)，使用Xcode打開React Native項(xiàng)目的IOS目錄，并使用AppIcon配置應(yīng)用展示圖、使用LaunchImage配置應(yīng)用引導(dǎo)圖。由于IOS默認(rèn)關(guān)閉了部分服務(wù)，所以首先需要將APP需要的服務(wù)開啟，包括http請(qǐng)求、位置授權(quán)、相冊(cè)授權(quán)以及相機(jī)授權(quán)等，然后執(zhí)行IOS版本資源打包命令：

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

在完成IOS版本資源打包后，需要手動(dòng)將打包圖片資源asstes與腳本資源index.ios.jsbundle引入到項(xiàng)目路徑，并使用react-native-splash-screen插件解決APP啟動(dòng)時(shí)加載白屏Ih1題，然后使用archive命令導(dǎo)出蘋果APPStore支持的ipa資源文件，并使用application loader工具實(shí)現(xiàn)對(duì)打包資源的上傳審核。當(dāng)審核通過后即可以通過蘋果APPStore完成智慧吉首APP IOS版本的下載及應(yīng)用。

智慧吉首APPAndroid應(yīng)用如圖1（左），IOS應(yīng)用如圖1（右）。

5 總結(jié)

為了提高智慧吉首APP的開發(fā)效率及質(zhì)量，本文選擇使用React Native技術(shù)對(duì)其進(jìn)行Android與IOS兼容開發(fā)，由于React Native技術(shù)是基于JavaScript與React的類原生移動(dòng)應(yīng)用，所以其兼顧了原生開發(fā)的性能與框架開發(fā)的高效，最終為智慧吉首APP的應(yīng)用提供高質(zhì)量的保障。

參考文獻(xiàn)

[1]焦鋒.react native在app開發(fā)中的應(yīng)用研究[J].數(shù)字技術(shù)與應(yīng)用，2017（06）：109.

[2]鐘愛青.基于React Native的校園二手物品競拍平臺(tái)的設(shè)計(jì)與實(shí)現(xiàn)[J].電腦知識(shí)與技術(shù)，2018（16）：89-94.