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

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

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

import { observable, computed, action } from 'mobx'
import cartGoods from './cartGoods'
import newGoods from './newGoods'import categoryGoods from './catetgoryGoods'
/** 
* 根store 
* @class RootStore 
* CartStore 為購物車頁面的數(shù)據(jù) 
* NewGoodsStore 為首頁的數(shù)據(jù) 
* categoryGoodsStore 為分類頁的數(shù)據(jù) 
*/
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()

// 全局注冊并注入mobx的Rootstore實例，首頁新品，分類頁，商品詳情頁，購物車頁面都要用到store
import {Provider} from 'mobx-react'
// 獲取store實例
import store from './mobx/store' 
const Navigation = () => { 
 return ( 
 <Provider rootStore={store}> 
 <Navigator/> 
 </Provider> 
)}

import { inject, observer } from 'mobx-react'
@inject('rootStore') // 緩存rootStore,也就是在Root.js注入的
@observerexport default class HomeScreen extends Component {
 ......
}

addCart(value) {
 if(this.state.num == 0) { 
 this.refs.toast.show('添加數(shù)量不能為0哦~')
 return; 
} 
// 加入購物車頁面的列表上 
// 點一次，購物車數(shù)據(jù)同步刷新 
this.updateCartScreen(value)
this.refs.toast.show('添加成功^_^請前往購物車頁面查看')
}
// 同步更新購物車頁面的數(shù)據(jù)
updateCartScreen (value) { 
 let name = this.props.navigation.state.params.value.name;
 // 判斷購物車頁面是否存在同樣名字的物品 
 let index;
 if(this.props.rootStore.CartStore)
 index = this.props.rootStore.CartStore.allDatas.data.findIndex(e => (e.name === name))
 // 不存在
 if(index == -1) {
 this.props.rootStore.CartStore.allDatas.data.push(value) 
 // 加入CartStore里
 // 并讓購物車icon更新
 let length = this.props.rootStore.CartStore.allDatas.data.length 
 this.props.rootStore.CartStore.allDatas.data[length - 1].count += this.state.num}
 else { 
 // 增加對應name的count
 this.props.rootStore.CartStore.allDatas.data[index].count += this.state.num 
 }}

// 購物車store
class CartStore {
 @observable allDatas = {}
 constructor(data,rootStore) { 
 this.allDatas = data
 this.rootStore = rootStore
}
 //加
 @action
 add(money) { 
 this.allDatas.totalMoney += money 
}
 // 減
 @action
 reduce(money) { 
 this.allDatas.totalMoney -= money 
}
 // checkbox true 
 @action
 checkTrue(money) {
 this.allDatas.totalMoney += money
 } 
 // checkbox false
 @action
 checkFalse(money) {
 if(this.allDatas.totalMoney <=0 ) 
 return 
 this.allDatas.totalMoney -= money
}
 // 全選
 @action
 allSelect() {
 if(this.allDatas.isAllSelected) {
 // 重置totalMoney 
 this.allDatas.totalMoney = 0 
 this.allDatas.data.forEach(e=> {
 this.allDatas.totalMoney += e.count * e.price})}
 else { 
 this.allDatas.totalMoney = 0 
}}
 // check全選 
 @action 
 check() { 
 // 所有checkbox為true時全選才為true 
 let allTrue = this.allDatas.data.every(v => ( v.isSelected === true ))
 if(allTrue) { 
 this.allDatas.isAllSelected = true 
 }else { 
 this.allDatas.isAllSelected = false 
}}
 // 刪 
 @action
 delect(name) { 
 this.allDatas.data = this.allDatas.data.filter (e => (e.name !== name ))
}
 // 總價格
 @computed get totalMoney() { 
 let money = 0;
 let arr = this.allDatas.data.filter(e => (e.isSelected === true))
 arr.forEach(e=> (money += e.price * e.count))
 return money
}}

// 付款
 pay() { 
 Alert.alert('您好',`總計:￥ ${this.props.mobx.CartStore.totalMoney}`, 
 {text: '確認支付', onPress: () => this.clear()},
 {text: '下次再買', onPress: () => null}],{ cancelable: false })}
 // 清空購物車 
 clear() { 
 this.setState({visible: !this.state.visible})
 setTimeout(()=>{ 
 this.setState({ loadText: '支付成功!歡迎下次光臨!' }) 
 setTimeout(()=> { this.setState({ visible: false },
 ()=>{ this.props.mobx.CartStore.allDatas.data = []
 // 把所有商品count都變?yōu)? 
 this.props.mobx.NewGoodsStore.allDatas.data.forEach(e=> e.count = 0)
 this.props.mobx.categoryGoodsStore.allDatas.data.forEach( e => { 
 e.detail.forEach(value => { value.count = 0 }) 
 })
 })},1500)},2000)}

@computed get dataSource() { 
 return this.props.rootStore.CartStore.allDatas.data.slice();
}
...
<FlatList data={this.dataSource} .../>

_keyExtractor = (item,index)=> { 
 // 千萬別用index，不然在刪購物車數(shù)據(jù)時，如果從第一個item開始刪會產(chǎn)生節(jié)點渲染錯亂的bug 
 return item.name
}