React Native 仿 ofo 共享單車 App

• 本文爲 Marno 原創，轉載必須保留出處！
• 公衆號【 aMarno 】，關注後回覆 RN 加入交流羣
• React Native 優秀開源項目大全：www.marno.cn

---

1、前言

並無實現 ofo 全部功能，只完成了主要的界面和邏輯，感受其中也就【地圖】和【掃碼】兩個比較核心的功能還須要花點時間之外，其餘的就都比較簡單了，並且因爲沒有API，模擬數據也沒啥意思，因此就沒有寫那麼完整。

地圖: 用的是高德的 JS 地圖，我在以前的一片文章中《Android快速實現地圖功能（不只快！並且小！）》有提到過這樣的實現方式，感興趣的朋友能夠點過去看一下，只不過這一次用到了更多的功能而已。使用 JS 地圖代替原生地圖的好處就是不用再處理麻煩的依賴包關係，可是缺點就是性能要比原生地圖差。可是實際使用下來，也仍是能達到正常使用的級別，不至於徹底無法用。

掃碼: 功能是基於 react-native-camera 開源庫進行的二次開發，前段時間我也將其封裝成了開源組件，上傳到了 NPM 服務器，能夠直接經過 npm install ac-qrcode --save 進行安裝使用，有須要的朋友能夠到我 github 主頁進行查看，或者在我博客以前的文章裏找下，傳送門 >>> juejin.im/post/590740…

2、截圖預覽

首頁	我的中心	掃碼

3、技術框架

• "react": "16.0.0-alpha.6"
• "react-native": "0.43.1"
• "native-base": "^2.1.1"（綜合框架）
• "react-navigation": "^1.0.0-beta.7"（導航）
• "ac-qrcode": "^1.0.0"(掃碼組件)
• "react-native-simple-toast": "0.0.5"（吐司）

4、倉庫地址：react-native-ofo

項目運行步驟以下：

• 第一步：npm install
• 第二步：react-native link
• 第三步：react-native run-android（或 run-ios）

理論兼容 Andorid / iOS，但沒在 iOS 真機上試過，只在虛擬機上試了下。

須要特別聲明一下，由於用到了 「react-navigation」，在 RN 0.43 上會報錯，雖然在 RN 0.44 中已經進行了修復，可是我尚未升級版本。暫時的解決辦法能夠到這裏看下：github.com/react-commu…

5、項目心得

按照慣例，每完成一個仿寫項目，我仍是喜歡進行一下總結。

這個是我開源的第二個用 RN 仿寫的的項目了，因此不管是對 RN 的理解仍是使用上，相對以前開源 react-native-eyepetizer 的時候有了一些進步，並且中間還在不斷學習一些 React 的知識，去深刻理解組件生命週期，並以此做爲着手點進行性能的優化，這部份內容後面我也會整理成文章分享出來。

回到此次開源的項目上來，最明顯的就是關於分包結構的調整，以前在仿寫開眼的時候，並無考慮那麼多，想的就是先入門再說。可是隨着學習的深刻，須要處理的邏輯逐漸複雜，合理清晰的管理代碼是十分有必要的。

仿開眼項目包結構	仿ofo項目包結構

直接用上面的兩張圖作了個簡單的對比，總結下就是：

• 存放頁面的文件夾命名從 pages 改成 screens
• 頁面中組件的樣式用單獨文件進行管理，採用 」頁面名+Styles「方式命名，如：HomeScreenStyles，方便樣式的複用和管理。
• 須要複用的組件抽取成單獨一個類，存放到 components 包中。
• 圖片、常量、顏色、公共樣式等資源，分別用一個入口類管理，就和 Android 中管理資源的作法相似，這樣更易維護。

最後說一下爲啥沒有用 Redux

• 以爲項目還不算複雜，沒有必要使用 Redux
• 若是隻是管理狀態，Mobx 使用要簡單點
• 好吧……我說實話，由於我還不太會。

---