13518219792
這篇文章主要介紹了如何使用React-Native+Mobx做迷你水果商城APP，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
我們提供的服務有：成都網站建設、網站制作、微信公眾號開發、網站優化、網站認證、瓜州ssl等。為超過千家企事業單位解決了網站和推廣的問題。提供周到的售前咨詢和貼心的售后服務，是有科學管理、有技術的瓜州網站制作公司
先來張動圖，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 // 主入口
在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 (
把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
}感謝你能夠認真閱讀完這篇文章，希望小編分享的“如何使用React-Native+Mobx做迷你水果商城APP”這篇文章對大家有幫助，同時也希望大家多多支持創新互聯，關注創新互聯行業資訊頻道，更多相關知識等著你來學習!
