React-Native+Mobx實現商城APP
- php中世界最好的语言原創
- 2018-04-13 15:04:253061瀏覽
這次帶給大家React-Native Mobx實現商城APP，React-Native Mobx實現商城APP的注意事項有哪些，以下就是實戰案例，一起來看一下。
最近一直在學習微信小程序，在學習過程中，看到了 wxapp-mall 這個微信小程式的項目，覺得很不錯，UI挺小清新的，便clone下來研究研究，在看源碼過程中，發現並不復雜，用不多的代碼來實現豐富的功能確實令我十分驚喜，於是，我就想，如果用react-native來做一個類似這種小專案難不難呢，何況，寫一套程式碼還能同時跑android和ios（小程式也是。。），要不寫一個來玩玩？有了這個想法，我便直接 react-native init 一個project來寫一下(๑•̀ㅂ•́)و✧
# 技術框架以及元件
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 資料夾下的元件都寫有註解的(°ー°〃)
# 主要還是來聊聊Mobx吧
# 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>
<navigator></navigator>
</provider>
)}
把Rootstore實例注入到元件樹中後，那麼，是不是在元件中直接使用 this.props.rootStore 就可以取到了呢？
‘'不是的”，我们还需要在要用到Rootstore的组件里，要加点小玩意，在 HomeScreen.js （首页）中这么写：
import { inject, observer } from 'mobx-react'
@inject('rootStore') // 缓存rootStore,也就是在Root.js注入的
@observerexport default class HomeScreen extends Component {
......
}
加上了 @inject('rootStore') ，我们就可以愉快地使用 this.props.rootStore 来拿到我们想要的数据啦^_^ ，同样，在商品信息，分类页，购物车页面js下，也需要使用 @inject('rootStore') 来实现数据的获取，然后再一步步地把数据传到它们的子组件中。
2. 加入购物车的实现
在首页和分类页中，都可以点击跳转到商品信息页，然后再加入到购物车里
实现方法 ：
在itemDetail.js下，也就是商品信息页面下，加入购物车的逻辑是这样子的:
addCart(value) {
if(this.state.num == 0) {
this.refs.toast.show('添加数量不能为0哦~')
return;
}
// 加入购物车页面的列表上
// 点一次，购物车数据同步刷新
this.updateCartScreen(value)
this.refs.toast.show('添加成功^_^请前往购物车页面查看')
}
// 同步更新购物车页面的数据
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
}}
简单的说，先获取水果的名称name，然后再去判断Mobx的CartStore里面是否存在同样的名称的水果，如果有就增加对应name的数量count，如果没有，就往CartStore中增加数据，切换到购物车页面时，视图会同步刷新，看到已加入购物车的水果。
3.改变商品状态同步更新视图
当用户在购物车页面操作商品状态时，数据改变时，视图会跟着同步刷新。
例如，商品的增加数量，减少数据，选中状态，商品全选和商品删除，总价格都会随着商品的数量变化而变化。
图又来了~~
实现上面的功能，主要用到了Mobx提供的action方法，action是用来修改状态的，也就是用action来修改商品的各种状态（数量，选中状态...），这些action，我是写在 store.js 的 CartStore类 中的，下面贴出代码
// 购物车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 {
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
}}
所有修改商品状态的逻辑都在上面代码里面，其中，totalMoney是用了Mobx的@computed方法，totalMoney是依赖于CartStore的data数据，也就是商品数据，但data的值发生改变时，它会重新计算返回。如果了解vue的话，这个就相当于vue的计算属性。
4.结算商品
商品结算和清空购物车的逻辑都写在 CartCheckOut.js 里面，实现过程很简单，贴上代码吧：
// 付款
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都变为0
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)}
这里主要用了setTimeout和一些方法来模拟实现 支付中 => 支付完成 => 清空购物车 => 还原商品状态。
好了，这个流程就搞定了，哈哈。
5.遇到的小坑
1.我写了一个数组的乱序方法，里面有用到 Array.isArray() 这个方法来判断是否为数组，但是，我用这个乱序函数时，想用来搞乱store里面的数组时，发现一直没有执行，觉得很奇怪。然后我直接用 Array.isArray() 这个方法来判断store里面的数组，返回的一直都是false。。。于是我就懵了。。。后来，我去看了Mobx官方文档，终于找到了答案。原来，store里面存放的数组，并不是真正的数组，而是 obverableArray ，如果要让 Array.isArray() 判断为true，就要在取到store的数组时，加个. slice() 方法，或者 Array.from() 都可以。
2.同样，也是obverableArray的问题。在购物车页面时，我用了FlatList来渲染购物车的item，起初，当我增加商品到购物车，发现购物车页面并没有刷新。有了上面的踩坑经验，我认为是obverableArray引起的，因为FlatList的data接收的是real Array，于是，我用这样的方法：
@computed get dataSource() {
return this.props.rootStore.CartStore.allDatas.data.slice();
}
...
<flatlist></flatlist>
于是，购物车视图就可以自动地刷新了，在官方文档上也有写到。
3.还有一个就是自己粗心造成的。我写完这个项目后，和朋友出去玩时，顺便发给朋友看看，他在删除商品时发现，从上往下删删不了，从下往上删就可以。后来我用模拟器测试也是如此，于是就去看看删除商品的逻辑，发现没有问题，再去看store的数据，发现也是可以同步更新的，只是视图没有更新，很神奇，于是我又在FlatList去找原因，终于，原因找到了，主要是在keyExtractor里面，用index是不可以的，要用name来作为key，因为我删除商品方法其实是根据name来删的，而不是index，所以用index来作为FlatList的Item的key时是会出现bug的。
_keyExtractor = (item,index)=> {
// 千万别用index，不然在删购物车数据时，如果从第一个item开始删会产生节点渲染错乱的bug
return item.name
}
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上是React-Native+Mobx實現商城APP的詳細內容。更多資訊請關注PHP中文網其他相關文章！