基于React Native的校園二手交易平臺的設計與實現

胡佳靜

（武漢軟件工程職業學院，湖北武漢 430205)

0 引言

伴隨著我國商品經濟的高速發展，當代大學生的購買能力也隨之提升，他們的消費方式呈多樣性，其中，二手交易的消費模式是廣大在校大學生最喜愛的消費方式之一。學生樂于將自己手中的書籍、生活用品、文娛用品、電子資料等閑置物品通過二手交易市場進行直接交易并獲得一定的經濟收入，同時，學生也能通過有限的生活費購買到物美價廉的二手物品，校園二手物品交易活動在每年的畢業季更是爆發式增長[1]。

在校大學生的二手交易活動大多依托線上QQ群和線下校園場所完成，這種方式簡單、直接，卻存在諸多問題。例如，交易活動涉及的QQ 群是一個聊天平臺，發布的二手物品信息容易被聊天信息淹沒，嚴重影響了商品的宣傳；二手交易的QQ 群多為宿舍樓棟群，各個群之間的二手物品信息無法共享，限制了交易活動的范圍；群內成員沒有得到嚴格、有效的實名認證，存在假冒校內學生的不法分子混入群內進行詐騙[2]。在信息化時代，通過軟件技術開發一個大學校園二手交易平臺，能有效地為二手交易活動提供便利和安全的服務。

隨著智能手機的普及以及移動互聯網的快速發展，手機端App的安裝數量和使用時長不斷提高，App的使用貫穿了人們的生活、工作和學習。為滿足在校大學生的二手交易需求，并貼合學生的手機使用習慣，基于JavaScript框架React Native，開發校園二手交易平臺的App。學生通過應用商店下載該App 至手機，能隨時隨地進行二手交易活動，合理地處理閑置資源。

1 關鍵技術

一般，對于同一款App，針對Android、iOS 兩種不同的操作系統，分別采用不同的技術來開發，例如，運行在Andorid 平臺的App 使用Java 語言，與之對應的iOS 平臺則使用Swift 和Objective-C。隨著移動互聯網的發展，Facebook 公司于2015 年開源了一款JavaScript框架React Native，提供了接近原生應用程序的性能和體驗，技術人員通過JavaScript 程序語言即可開發跨平臺App。校園二手交易平臺App 的開發基于React Native框架，并采用了與該框架相關的一些關鍵技術，如React框架、第三方庫。

1.1 React Native框架

基于React Native 開發的App 具有跨平臺的特性[3]。技術人員開發維護一套業務邏輯代碼，分別構建成可運行在Android、iOS兩個不同平臺上的應用程序，提高了代碼的復用率，降低了開發成本。跨平臺特性源于React Native 使用了一個跨平臺的三層架構，如圖1所示。在JavaScript 層，將React Native 提供的API、核心組件封裝于React 組件中，完成頁面具體的業務邏輯開發；C++層，即橋接層，負責解析Java-Script代碼，使用了Fabric渲染器，并為JavaScript層和平臺層的通訊提供服務；Mobile Platform，即平臺層，負責提供原生功能[4]。

圖1 跨平臺的三層架構

React Native 的熱更新特性使得App 的更新繞過App Store的冗長審核和上傳過程，開發者可隨時隨地解決bug，更新App，提高了程序的可維護性。在發布階段，將項目中的js文件（包含React Native源碼、第三方庫、業務代碼）打包成最新的Bundle文件，并上傳至服務器，重新啟動App時，App自動向服務器請求最新Bundle 文件，替換掉已有的Bundle 文件，從而更新了App[5]。

在React Native 的開發中，根據Web 的CSS 技術，使用JavaScript 編寫樣式，將樣式賦值給了核心組件的style 屬性，從而設置頁面視圖的樣式。然而，不同于Web的CSS樣式命名，React Native的樣式命名需要轉換成駝峰形式，比如justify-content 改為justifyContent，background-color改為backgroundColor。

使用React Native框架開發移動端App，技術人員無須特地學習原生開發的相關知識，開發工作的重點在于對用戶頁面的還原和業務邏輯的實現。因此，對具有移動端或前端開發經驗的技術人員，學習成本相對較低。

校園二手交易平臺App 采用了前后端分離的開發模式，前端開發用戶頁面，后端提供頁面所需數據。React Native 提供了從遠程地址獲取數據的API，即與Web 標準一致的Fetch 方法，能夠滿足網絡請求數據的需求。

1.2 React框架

React 是Facebook 開源的JavaScript 前端框架，致力于構建用戶界面。React 應用程序由組件構建，用戶頁面上的內容被分解為可復用、可嵌套、含狀態的組件，當狀態發生變化，組件會自動更新，頁面內容也將隨之變化[6]。

React 使用JSX 語法，在JavaScript 代碼中嵌入HTML，將一個組件的表現層和邏輯層組合在一個js文件中，使得每個組件具有獨立性，降低了代碼的耦合性，提高了代碼的復用性。

React Native 將原生開發部分與React 相結合，實現組件化開發。React Native提供了多個核心組件，如View、Text、Button 等，React 組件將核心組件與業務邏輯進行有機組合，詳細描述了頁面的內容。

1.3 第三方庫

對于校園二手交易平臺App，React Native 提供的核心組件和API無法滿足一些復雜的業務場景，為了降低開發成本，保障平臺的穩定性，可引入React Native 社區中成熟的第三方庫，如react-navigation 導航庫、react-native-largelist-v3 列表組件庫、@reactnative-async-storage/async-storage本地存儲庫。

基于React Native 的項目開發使用了工程化開發模式，通過Node 環境自帶的npm 包管理工具來管理項目的依賴包（庫）。當項目需要安裝第三方庫，在聯網條件下，使用命令行終端執行npm install 命令來安裝這些庫，如圖2 所示，通過npm 命令安裝reactnative-largelist-v3列表庫。與安裝命令相對應的卸載命令，則是npm uninstall，方便技術人員卸載第三方庫。

圖2 npm命令安裝react-native-largelist-v3列表庫

2 平臺功能與實現

根據當前大學生對校園二手交易平臺的需求，對這款基于React Native 的跨平臺App 的總體進行了設計，使得學生能夠通過該平臺發布、購置二手商品，現階段已完成的總體功能如圖3所示。

圖3 校園二手交易平臺功能

2.1 核心功能設計

用戶賬號。為避免不法人員的混入，在校學生需憑借個人關鍵信息（學號、手機）注冊平臺，后臺系統將嚴格審核用戶的注冊信息。審核通過的用戶成功登錄后，才能使用平臺提供的服務。

商品購買。買家通過推薦的、搜索的商品列表，查找目標二手商品，進入商品詳情頁后，則可點擊收藏，方便日后查找和購買，或者直接購買二手商品。

商品發布。賣家在平臺中描述待出售商品的信息，保存為草稿或者直接發布上架。同時，賣家可更新商品信息，甚至下架商品。

訂單列表。賣家、買家均能查看不同狀態的訂單，瀏覽訂單詳情。買家可對交易成功的訂單進行即時評價或者追評，這些評價將影響賣家的等級。

交流溝通。平臺不提供支付、物流功能，買家在購買過程中，可與賣家通過平臺提供的交流工具進行互動，溝通交貨、付款等相關事宜。

2.2 平臺實現

基于版本號為0.72 的React Native 框架開發的校園二手交易平臺，現階段已經開發了賬號、商品購買、商品發布、溝通交流等功能，這些功能對應的部分頁面如圖4所示。

圖4 校園二手交易平臺部分頁面

用戶打開校園二手交易平臺App 后，App 將判斷用戶的登錄信息，根據判斷結果決定是否為用戶展示登錄頁面。因此，獲取和存儲用戶的登錄信息是平臺最基本、最重要的功能之一。用戶成功登錄后，App將用戶信息存儲至本地，之后每次打開App時，App先從本地存儲中讀取、驗證用戶信息，再根據驗證結果判斷用戶是否需要重新登錄。其中，App 使用了@react-native-async-storage/async-storage 第三方庫提供的API實現本地存儲、讀取用戶信息等功能。平臺中其他的頁面也能通過該庫提供的API 來獲取本地存儲的用戶信息進行業務開發，例如，個人中心的用戶信息展示功能，頁面接口請求后端獲取數據時需要的用戶憑證。

校園二手交易平臺中的每個頁面由React組件定義。如登錄頁面，創建Login.js文件，定義Login組件，文件代碼的主要結構如圖5所示。因此，多個頁面則需要創建多個React組件文件。

圖5 登錄組件的代碼結構

使用react-navigation 導航庫管理多個頁面組件，保障了頁面的展示和互相跳轉。在項目的入口組件App.js中，使用導航庫注冊頁面組件，并指定在App打開后初始化展示的頁面組件，部分核心代碼如圖6所示。在各個組件內部，可通過導航庫的API實現了攜參跳轉其他頁面的功能。

圖6 導航庫注冊頁面組件的部分核心代碼

高性能的react-native-largelist-v3 列表組件庫，支持大量數據源的列表展示，提供了良好的用戶體驗。該組件庫提供了上拉加載和下拉刷新等開箱即用的功能，降低了業務開發的難度和工作量。在校園二手交易平臺中，首頁的商品列表、個人的收藏列表、訂單列表等均使用了該組件展示數據。

3 總結

校園二手交易平臺使用軟件技術整合了線上和線下資源，為在校大學生的二手物品交易活動提供信息化服務。基于React Native 框架，使用JavaScript 程序語言和React 組件，開發了跨平臺的手機端App，目前已完成賬號、商品購買、商品發布、溝通交流等基本功能，運行穩定。為提高用戶體驗，項目將根據用戶的需求，做進一步的優化，為校園二手交易活動保駕護航。