鄧雯雯 馮穎凌

摘要：隨著移動互聯(lián)網(wǎng)的迅速發(fā)展，移動應(yīng)用帶來的便利使人們慢慢開始改變自己的生活習(xí)慣。微信、支付寶的普及打開了移動支付的大門，淘寶、京東等軟件引領(lǐng)了全民網(wǎng)購的潮流，釘釘、騰訊課堂、慕課網(wǎng)等教育應(yīng)用開啟了網(wǎng)課時代，移動互聯(lián)網(wǎng)正在慢慢地滲透進人們的生活中。本課題以React-Native為框架，提供一個具有多功能和信息內(nèi)容的移動跨平臺應(yīng)用。該應(yīng)用主要包含登錄注冊模塊、熱門推薦模塊、簽到模塊、天氣預(yù)報模塊以及課表模塊。本文通過對需求的分析和功能的實現(xiàn)進行的闡述，以模塊化和組件化的思想對應(yīng)用的功能進行獨立的劃分，實現(xiàn)代碼的低耦合高內(nèi)聚。同時對React Native 的啟動白屏問題提出了解決思路和優(yōu)化方案。

關(guān)鍵詞：react-native;校園;移動;應(yīng)用

中圖分類號：TP391? ? ? ?文獻標識碼：A

文章編號：1009-3044（2020）36-0243-03

1 引言

在傳統(tǒng)開發(fā)中，為了兼容Android操作系統(tǒng)和iOS操作系統(tǒng)的移動設(shè)備，一款app應(yīng)用需要分兩次開發(fā)，由于在不同客戶端平臺下要求的技術(shù)不同，所以企業(yè)需要花費大量的人力成本和研發(fā)成本，而且每次應(yīng)用更新都要雙端同步，這使得維護成本也大大提高。

而React Native 框架的出現(xiàn)恰好解決了上述的問題，React Native的跨平臺性能夠讓一套代碼運行在兩種系統(tǒng)上，前端開發(fā)人員只需要通過JavaScript開發(fā)業(yè)務(wù)代碼，并不需要額外地去學(xué)習(xí)客戶端技術(shù)，這樣就大大降低了開發(fā)人員的學(xué)習(xí)成本并且增強了移動應(yīng)用的可擴展性。而且React Native和原生移動應(yīng)用在使用感受上十分相似，甚至可以說是無法區(qū)分差別的[[1]]。

隨著信息越來越多元化，在如今校園中，移動校園app無疑是一個信息整合的高效、統(tǒng)一的渠道。因此，本課題選取React Native為框架，基于解決當前校內(nèi)大學(xué)生實際生活需求和生活習(xí)慣，提供一個具有多功能和信息內(nèi)容的跨平臺移動應(yīng)用。

2 主要技術(shù)與實現(xiàn)

2.1 主要技術(shù)

本課題研究內(nèi)容是基于React Native框架的移動校園app，該應(yīng)用客戶端主要包含登錄注冊模塊、熱門推薦模塊、簽到模塊、天氣預(yù)報模塊以及課表模塊。

以模塊化思想劃分功能，這樣每個模塊都是一個獨立的功能，可以減少代碼的耦合性，提高代碼質(zhì)量，并且使結(jié)構(gòu)更加清晰，利于后期維護。

后端使用技術(shù)棧： Node.js + Express+ Mongoose

圖形化管理工具—Robo 3T

分析思路：

1）用express框架搭建一個web應(yīng)用程序，提供數(shù)據(jù)接口。

2）Mongoose數(shù)據(jù)庫基于scheme結(jié)構(gòu)去定義了一種直接的數(shù)據(jù)模型。

分析思路：

用express框架搭建一個web應(yīng)用程序，提供數(shù)據(jù)接口。

Mongoose數(shù)據(jù)庫基于scheme結(jié)構(gòu)去定義了一種直接的數(shù)據(jù)模型。

2.2 React Native框架的原理和通信

React Native使用JSX來描述用戶界面，但UI組件渲染、動畫效果、網(wǎng)絡(luò)請求等都是通過原生實現(xiàn)的，開發(fā)人員編寫JavaScript業(yè)務(wù)代碼，通過React Native的中間層對調(diào)用原生控件，獲得與原生應(yīng)用一致的用戶體驗[[3]]。在Android平臺下，React Native主要是由C++層、Java層、JavaScript層組成。

C++實現(xiàn)的動態(tài)鏈接庫作為中間適配層橋接，實現(xiàn)了JavaScript與Java層的雙向通信。這里主要是C++層封裝的JavaScriptCore組件執(zhí)行了JavaScript代碼的解析，同時完全隔離了Java層和JavaScript層，開發(fā)人員只需要專注于JavaScript的代碼實現(xiàn)[[4]]。

Java層是ReactNative框架加載和啟動的入口，它封裝了負責(zé)React Native與Native code通信的Bridge組件。通過啟動C++層的JavaScript解釋器，然后JavaScriptCore解析執(zhí)行JavaScript代碼，然后把計算好的結(jié)果返回給Native code，然后Native code驅(qū)動設(shè)備上的硬件。因此通過Bridge組件，讓JavaScript能夠調(diào)用豐富的原生接口，充分發(fā)揮硬件的能力，優(yōu)化應(yīng)用性能。原生接口包括圖片資源訪問、圖形圖像繪制、3D加速、網(wǎng)絡(luò)請求、震動效果、原生控件繪制、地圖、定位、通知等。

3 模塊的分析與實現(xiàn)

3.1? 登錄注冊模塊的分析與實現(xiàn)

實現(xiàn)思路：

1）在服務(wù)器連接mongoose數(shù)據(jù)庫，創(chuàng)建User模型。數(shù)據(jù)庫中結(jié)構(gòu)如下：

2）設(shè)置一個變量isSignIn，默認是true，通過控制這個變量，切換組件的樣式以及將用填寫的信息傳給不同的函數(shù)，執(zhí)行不同的方法。這樣可以實現(xiàn)組件和代碼的復(fù)用。

3）如果isSignIn的值是false，說明用戶想要注冊賬號，則把數(shù)據(jù)傳給服務(wù)端，服務(wù)端將數(shù)據(jù)存入數(shù)據(jù)庫中。如果isSignIn的值是true，說明用戶想要登錄賬號，則把數(shù)據(jù)傳給服務(wù)端，服務(wù)端在數(shù)據(jù)庫查找，找到的話就說明登錄成功。

4）通過react-navigation（路由）進行頁面跳轉(zhuǎn)，之后的頁面跳轉(zhuǎn)實現(xiàn)也是如此。

3.2首頁模塊的分析與實現(xiàn)

實現(xiàn)思路：

1） 輪播圖使用了react-native-swiper插件。

2） 子菜單中每一個跳轉(zhuǎn)按鈕復(fù)用同一個組件，只需要改變每次傳入的參數(shù)即可。子菜單用一個數(shù)組記錄，里面存放數(shù)據(jù)是對象。

3） 同理，長列表中每一欄也可以復(fù)用同一個組件，UI組件隨著傳入的參數(shù)渲染出不同的內(nèi)容。然后在每次渲染前，獲取當前日期時間，并且使用正則轉(zhuǎn)換數(shù)據(jù)格式，渲染出獲取數(shù)據(jù)的日期時間。

4） 點擊熱門模塊的某一項，發(fā)送路由跳轉(zhuǎn)。同時將id值傳入請求數(shù)據(jù)的接口。

3.3課表模塊的分析與設(shè)計

分析需求：

1）以表格的形式展示課表信息，每一行對應(yīng)特定時間段的課表信息，每一列對應(yīng)日期當天的課表信息。

2）能夠修改并更新課表信息。

實現(xiàn)思路：

1） 在服務(wù)端鏈接mongoose數(shù)據(jù)庫，創(chuàng)建Timetable的模型。

2） 使用flex布局，將主軸方向水平方向（默認是垂直的）。根據(jù)課表是一個二維數(shù)組，所以用兩個循環(huán)語句把課表的行和列的內(nèi)容都渲染出來，并且數(shù)據(jù)塊不為空，將不同的行綁定不同的顏色。

3） 用一個變量控制課表的狀態(tài)，通過點擊修改，會將替換表格中的UI組件，將組件替換成，這樣就可以編輯文本了。

3.4天氣預(yù)報模塊的分析與設(shè)計

分析需求：

天氣預(yù)報模塊包含以下模塊：

1） 實現(xiàn)天氣頭部模塊;

2） 實現(xiàn)小時天氣模塊;

3） 實現(xiàn)每日天氣模塊;

4） 實現(xiàn)空氣質(zhì)量模塊;

5） 實現(xiàn)生活指數(shù)模塊。

功能：獲取并展示定位地點的天氣信息并且可以切換不同地區(qū)。

實現(xiàn)思路：

1） 初始化頁面的時候，檢查是否有定位權(quán)限，如果有，則說明定位成功，觸發(fā)回調(diào)函數(shù)，去請求數(shù)據(jù)，如果沒有，則觸發(fā)請求定位權(quán)限的回調(diào)函數(shù)，經(jīng)過用戶確認后，同意則去觸發(fā)請求數(shù)據(jù)的回調(diào)函數(shù)。

2） 將請求的返回的數(shù)據(jù)進行整理，保存天氣信息的對象。

3） 通過屬性傳值的方式，將數(shù)據(jù)傳入都對應(yīng)的模塊中，渲染UI組件。

4） 點擊頭部地區(qū)的時候，會觸發(fā)選擇器。

通過自定義子組件屬性，綁定父組件自身作用域的方法，在這里是獲取天氣信息的方法，在子組件的事件回調(diào)中執(zhí)行這個方法，從而獲取新的天氣信息，更新整個天氣組件。

4 分析與總結(jié)

本論文分析并實現(xiàn)了基于React Native框架的跨平臺移動校園App。

App基于React Native 框架開發(fā)，外部封裝Java、Objective-C，內(nèi)部封裝JavaScript。通過Bridge實現(xiàn)React Native與Native code的通信，實現(xiàn)線程模型等，并通過JavaScriptCore解析JS代碼，調(diào)用原生控件，渲染視圖。通過JS映射模塊的方式來構(gòu)建原生View，并將組合攜帶的數(shù)據(jù)綁定到ReactView，通過把ReactView添加到具體Activity中，讓Activity對應(yīng)一個生命周期。

本論文的主要開發(fā)有：客戶端所有的UI組件設(shè)計、服務(wù)端的部分接口、登錄注冊模塊、首頁模塊、簽到模塊、課表模塊、天氣預(yù)報模塊等。

參考文獻：

[1] 馮博.基于React Native框架的興趣社區(qū)Android客戶端設(shè)計與實現(xiàn)[D].哈爾濱：哈爾濱工業(yè)大學(xué)，2017.

[2] 潘婷婷.React Native在APP開發(fā)中的應(yīng)用研究[J].無線互聯(lián)科技，2016（19）：142-143.

[3] 程化梅.基于React Native的即時通訊應(yīng)用的設(shè)計與實現(xiàn)[D].武漢：武漢郵電科學(xué)研究院，2017：31-33.

[4] 李驍，張丹.基于混合模式的移動開發(fā)技術(shù)的研究[C]//決策論壇——企業(yè)管理模式創(chuàng)新學(xué)術(shù)研討會論文集.北京，2017：118-120.

[5] 嚴新巧.基于移動開發(fā)現(xiàn)狀探討React Native[J].電腦知識與技術(shù)，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] 王閱蓁.移動應(yīng)用的web與native混合編程模式研究與實現(xiàn)[D].成都：電子科技大學(xué)，2015.

【通聯(lián)編輯：唐一東】