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

日期：2020-05-11 栏目：程序人生浏览：次

在Root.js文件中，有关react-navigation的配置和使用方法可以参考下官方文档和这篇博客，里面都写得十分详细，有关react-navigation的疑问我都在这2篇文章中找到答案，在这里相关react-navigation配置，使用方法和项目里面页面布局，组件写法，在这里不打算细说，因为都比较简单，更多的是讨论Mobx实现功能的一些逻辑和方法， screen 文件夹下的组件都写有注释的(°ー°〃)

主要还是来聊聊Mobx吧

先来看看用Mobx实现的具体流程，看下面的动图(⊙﹏⊙)

ps: 可能图片太大，加载有点慢，请稍等......

1.数据存储和获取

这些都是用假数据来模拟实现的，在最开始，先写好假数据的数据结构，例如：

"data":
 [{ 
 "name": '那么大西瓜',
 "price": '2.0', 
 "image": require('../img/a11.png'), 
 "count": 0, 
 "isSelected": true
 },...]

在 Mobx 文件夹下的 store.js，在这里主要是存储和管理app用到的所有商品的数据，将逻辑和状态从组件中移至一个独立的，可测试的单元，这个单元在每个页面下都可以用到

import { observable, computed, action } from 'mobx'
import cartGoods from './cartGoods'
import newGoods from './newGoods'import categoryGoods from './catetgoryGoods'
/** 
* 根store 
* @class RootStore 
* CartStore 为购物车页面的数据 
* NewGoodsStore 为首页的数据 
* categoryGoodsStore 为分类页的数据 
*/
class RootStore { 
 constructor() { 
 this.CartStore = new CartStore(cartGoods,this) 
 this.NewGoodsStore = new NewGoodsStore(newGoods,this) 
 this.categoryGoodsStore = new categoryGoodsStore(categoryGoods,this) 
}}
Class CartStore{
 @observable allDatas = {} 
 constructor(data,rootStore) { 
 this.allDatas = data 
 this.rootStore = rootStore 
 }
}
Class NewGoodsStore{
 ...跟上面一样
}
Class categoryGoodsStore{
 ...跟上面一样
}
// 返回RootStore实例 
export default new RootStore()

这里用了 RootStore 来实例化所有了stores（购物车，首页，分类页分别拥有各自的store），

这样，可以通过RootStore 来管理和操作stores，从而实现它们之间的相互通信，共享引用。

其次，存储数据用了Mobx的@observable方法，就是把数据成为观察者，当用户操作视图，导致数据发生变化时，配合react-mobx提供的@observer可以自动更新视图，非常方便。

此外，为了把Mobx 的Rootstore注入到react-native的组件中，要通过 mobx-react 提供的 Provider 实现，在 Root.js 下，我是这么写的：

// 全局注册并注入mobx的Rootstore实例，首页新品，分类页，商品详情页，购物车页面都要用到store
import {Provider} from 'mobx-react'
// 获取store实例
import store from './mobx/store' 
const Navigation = () => { 
 return ( 
 <Provider rootStore={store}> 
 <Navigator/> 
 </Provider> 
)}

转载注明出处：http://www.heiqu.com/199.html

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

相关推荐