前言
最近一直在學習微信小程式，在學習過程中，看到了wxapp-mall這個微信小程式的專案，覺得很不錯，UI挺小清新的，便clone下來研究研究，在看原始碼過程中，發現並不複雜，用不多的程式碼來實現豐富的功能確實令我十分驚喜，於是，我就想，如果用react-native來做一個類似這種小專案難不難呢，何況，寫一套程式碼還能同時跑android和ios（小程式也是。。。），要不寫一個來玩玩？有了這個想法，我便直接react-native init 一個project來寫一下吧(๑•̀ㅂ•́)و✧
先來張動圖，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 (
<Provider rootStore={store}>
<Navigator/>
</Provider>
)}
複製程式碼把Rootstore例項注入到元件樹中後，那麼，是不是在元件中直接使用this.props.rootStore就可以取到了呢？
‘’不是的”，我們還需要在要用到Rootstore的元件裡，要加點小玩意，在HomeScreen.js（首頁）中這麼寫：
import { inject, observer } from 'mobx-react'
@inject('rootStore') // 快取rootStore,也就是在Root.js注入的
@observer // 將react元件轉變為響應式元件, 資料改變自動觸發render函式
export 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();
}
...
<FlatList data={this.dataSource} .../>複製程式碼於是，購物車檢視就可以自動地重新整理了，在官方文件上也有寫到。
3.還有一個就是自己粗心造成的。我寫完這個專案後，和朋友出去玩時，順便發給朋友看看，他在刪除商品時發現，從上往下刪刪不了，從下往上刪就可以。後來我用模擬器測試也是如此，於是就去看看刪除商品的邏輯，發現沒有問題，再去看store的資料，發現也是可以同步更新的，只是檢視沒有更新，於是我又在FlatList去找原因，終於，原因找到了，主要是在keyExtractor裡面，用陣列的index是不可以的，要用name來作為key，也就是說這裡的key值，要足夠穩定的，不能用index（索引）去繫結key，這也是react的語法之一。因為我刪除商品方法其實是根據name來刪的，而不是index，所以用index來作為FlatList的Item的key時是會出現bug的。
_keyExtractor = (item,index)=> {
// 千萬別用index，不然在刪購物車資料時，如果從第一個item開始刪會產生節點渲染錯亂的bug
return item.name
}複製程式碼寫在最後
總結
斷斷續續花了差不多一個星期才寫好，總得來說，我感覺用react-native來寫這麼一個商城專案要比小程式實現要複雜點，主要是在寫元件上花的時間要多一點，和這裡用Mobx來模擬實現購物流程也花了我些時間。Android打包成apk可以在我的模擬器上和我朋友的android手機上完美執行，還沒發現什麼bug，IOS的因為我沒MAC，所以暫時還沒打包測試T.T，希望有條件的小夥伴可以clone下來，幫我測測，有Issue的話可以提下，多謝多謝ヽ(✿ﾟ▽ﾟ)ノ
附上github專案地址： github.com/shooterRao/… (如果感興趣，希望能點下Star，給予點鼓勵，謝謝！)
致謝
這個小專案的靈感出於wxapp-mall，在此款小程式的基礎上，優化了購物邏輯和一些互動上的修改。有些UI和Icon也沿用了此款小程式，我也得到了原作者的允許，非常感謝。此外，我還要特別感謝肖JerryShaw幫我作的水果圖和App的logo，還有也要感謝Keson幫忙測試和提供建議。
這次是我第一次在掘金上發部落格，也算是我第一次開源專案吧，有不足的地方，希望大家能多多包涵，給點建議，謝謝！
還有，今天是平安夜，Happy Christmas Eve~