這次給大家帶來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 (

)}

把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 <=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

}}

所有修改商品狀態的邏輯都在上面代碼里面，其中，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();

}

...

于是，購物車視圖就可以自動地刷新了，在官方文檔上也有寫到。

3.還有一個就是自己粗心造成的。我寫完這個項目后，和朋友出去玩時，順便發給朋友看看，他在刪除商品時發現，從上往下刪刪不了，從下往上刪就可以。后來我用模擬器測試也是如此，于是就去看看刪除商品的邏輯，發現沒有問題，再去看store的數據，發現也是可以同步更新的，只是視圖沒有更新，很神奇，于是我又在FlatList去找原因，終于，原因找到了，主要是在keyExtractor里面，用index是不可以的，要用name來作為key，因為我刪除商品方法其實是根據name來刪的，而不是index，所以用index來作為FlatList的Item的key時是會出現bug的。_keyExtractor = (item,index)=> {

// 千萬別用index，不然在刪購物車數據時，如果從第一個item開始刪會產生節點渲染錯亂的bug

return item.name

}

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的php react-native,React-Native+Mobx实现商城APP的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。