前言

最近一直在學習微信小程序，在學習過程中，看到了 wxapp-mall 這個微信小程序的項目，覺得很不錯，UI挺小清新的，便clone下來研究研究，在看源碼過程中，發現并不復雜，用不多的代碼來實現豐富的功能確實令我十分驚喜，于是，我就想，如果用react-native來做一個類似這種小項目難不難呢，何況，寫一套代碼還能同時跑android和ios（小程序也是。。。），要不寫一個來玩玩？有了這個想法，我便直接 react-native init 一個project來寫一下吧(๑•̀ㅂ•́)و✧

先來張動圖，dengdengdeng~~

技術框架以及組件

• react "16.0.0"
• react-native "0.51.0"
• mobx: "3.4.1"
• mobx-react: "4.3.5"
• react-navigation: "1.0.0-beta.21"
• react-native-scrollable-tab-view: "0.8.0"
• react-native-easy-toast: "1.0.9"
• react-native-loading-spinner-overlay: "0.5.2"

為什么要用Mobx？

Mobx是可擴展的狀態管理工具，比react-redux要簡單，上手也比較快。在這個小項目中，因為沒有后臺服務接口，用的都是本地的假數據，為了模擬實現 瀏覽商品 =>加入購物車=>結賬=>清空購物車=>還原商品原始狀態 這么一個流程，便用Mobx來管理所有的數據以及商品的狀態(有沒有選中，有沒有加入購物車)，這樣，所有的頁面都可以共享數據以及改變商品的狀態，頁面之間的數據和商品狀態都是同步更新的。具體用Mobx怎么來實現這流程，在下面會分享使用感受和遇到的一些小坑。

開始

先react-native init一個project，然后用yarn或者npm裝好所有的依賴和組件。因為使用Mobx會用到ES7中裝飾器，所以還要安裝 babel-plugin-transform-decorators-legacy 這個插件，然后在.babelrc文件下添加一下內容即可。

{  "presets": ["react-native"],  "plugins": ["transform-decorators-legacy"]}

項目結構

|-- android |-- ios|-- node_modules|-- src |-- common // 公用組件 |-- img // 靜態圖片 |-- mobx // mobx store |-- newGoods.js // 首頁新品數據 |-- cartGoods.js // 購物車數據 |-- categoryGoods.js // 分類頁數據 |-- store.js // store倉庫，管理數據狀態  |-- scene  |-- Cart // 購物車頁面 |-- Category // 分類頁 |-- Home // 首頁 |-- ItemDetail // 商品信息頁 |-- Mine // 我的頁面  |-- Root.js // root.js主要內容是配置react-navigation(導航器)|-- index.js // 主入口

在Root.js文件中，有關react-navigation的配置和使用方法可以參考下官方文檔和這篇博客，里面都寫得十分詳細，有關react-navigation的疑問我都在這2篇文章中找到答案，在這里相關react-navigation配置，使用方法和項目里面頁面布局，組件寫法，在這里不打算細說，因為都比較簡單，更多的是討論Mobx實現功能的一些邏輯和方法， screen 文件夾下的組件都寫有注釋的(°