用React-Native+Mobx做一个迷你水果商城APP(附源码)

前言

最近一直在学习微信小程序，在学习过程中，看到了 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 // 主入口