移動校園生活幫之輕松校園行

鄧雯雯 馮穎凌

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

關鍵詞：react-native;校園;移動;應用

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

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

1 引言

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

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

隨著信息越來越多元化，在如今校園中，移動校園app無疑是一個信息整合的高效、統(tǒng)一的渠道。因此，本課題選取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組件渲染、動畫效果、網絡請求等都是通過原生實現的，開發(fā)人員編寫JavaScript業(yè)務代碼，通過React Native的中間層對調用原生控件，獲得與原生應用一致的用戶體驗[[3]]。在Android平臺下，React Native主要是由C++層、Java層、JavaScript層組成。

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

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

3 模塊的分析與實現

3.1? 登錄注冊模塊的分析與實現

實現思路：

1）在服務器連接mongoose數據庫，創(chuàng)建User模型。數據庫中結構如下：

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

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

4）通過react-navigation（路由）進行頁面跳轉，之后的頁面跳轉實現也是如此。

3.2首頁模塊的分析與實現

實現思路：

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

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

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

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

3.3課表模塊的分析與設計

分析需求：

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

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

實現思路：

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

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

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

3.4天氣預報模塊的分析與設計

分析需求：

天氣預報模塊包含以下模塊：

1） 實現天氣頭部模塊;

2） 實現小時天氣模塊;

3） 實現每日天氣模塊;

4） 實現空氣質量模塊;

5） 實現生活指數模塊。

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

實現思路：

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

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

3） 通過屬性傳值的方式，將數據傳入都對應的模塊中，渲染UI組件。

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

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

4 分析與總結

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

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

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

參考文獻：

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

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

[3] 程化梅.基于React Native的即時通訊應用的設計與實現[D].武漢：武漢郵電科學研究院，2017：31-33.

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

[5] 嚴新巧.基于移動開發(fā)現狀探討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.

【通聯編輯：唐一東】