- 本文為 Marno 原創，轉載必須保留出處！
- 公眾號【 aMarno 】，關注後回覆 RN 加入交流群
- React Native 優秀開源專案大全：www.marno.cn
一、前言
並沒有實現 ofo 所有功能，只完成了主要的介面和邏輯，感覺其中也就【地圖】和【掃碼】兩個比較核心的功能還需要花點時間以外，其他的就都比較簡單了，而且由於沒有API，模擬資料也沒啥意思，所以就沒有寫那麼完整。
地圖: 用的是高德的 JS 地圖，我在之前的一片文章中《Android快速實現地圖功能（不僅快！而且小！）》有提到過這樣的實現方式，感興趣的朋友可以點過去看一下，只不過這一次用到了更多的功能而已。使用 JS 地圖代替原生地圖的好處就是不用再處理麻煩的依賴包關係，但是缺點就是效能要比原生地圖差。但是實際使用下來，也還是能達到正常使用的級別，不至於完全沒法用。
掃碼: 功能是基於 react-native-camera 開源庫進行的二次開發，前段時間我也將其封裝成了開源元件，上傳到了 NPM 伺服器，可以直接通過 npm install ac-qrcode --save 進行安裝使用，有需要的朋友可以到我 github 主頁進行檢視，或者在我部落格之前的文章裡找下，傳送門 >>> juejin.im/post/590740…
二、截圖預覽
| 首頁 | 個人中心 | 掃碼 |
|---|---|---|
三、技術框架
- "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"（吐司）
四、倉庫地址：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…
五、專案心得
按照慣例，每完成一個仿寫專案，我還是喜歡進行一下總結。
這個是我開源的第二個用 RN 仿寫的的專案了，所以無論是對 RN 的理解還是使用上，相對之前開源 react-native-eyepetizer 的時候有了一些進步，而且中間還在不斷學習一些 React 的知識，去深入理解元件生命週期，並以此作為著手點進行效能的優化，這部分內容後面我也會整理成文章分享出來。
回到這次開源的專案上來，最明顯的就是關於分包結構的調整，之前在仿寫開眼的時候，並沒有考慮那麼多，想的就是先入門再說。但是隨著學習的深入，需要處理的邏輯逐漸複雜，合理清晰的管理程式碼是十分有必要的。
| 仿開眼專案包結構 | 仿ofo專案包結構 |
|---|---|
直接用上面的兩張圖做了個簡單的對比，總結下就是：
- 存放頁面的資料夾命名從 pages 改為 screens
- 頁面中元件的樣式用單獨檔案進行管理，採用 ”頁面名+Styles“方式命名，如：HomeScreenStyles，方便樣式的複用和管理。
- 需要複用的元件抽取成單獨一個類，存放到 components 包中。
- 圖片、常量、顏色、公共樣式等資源，分別用一個入口類管理，就和 Android 中管理資源的做法類似，這樣更易維護。
最後說一下為啥沒有用 Redux
- 覺得專案還不算複雜，沒有必要使用 Redux
- 如果只是管理狀態，Mobx 使用要簡單點
- 好吧……我說實話，因為我還不太會。