React-Native+Mobx로 쇼핑몰 APP 구현

이번에는 쇼핑몰 APP 구현을 위한 React-Native+Mobx를 가져오겠습니다. React-Native+Mobx로 쇼핑몰 APP 구현을 위한 주의사항은 무엇인가요?

최근에 WeChat 미니 프로그램을 배우고 있어요. 학습 과정에서 wxapp-mall을 봤어요. 이 WeChat 애플릿 프로젝트는 매우 좋다고 생각했고, UI도 꽤 작고 신선해서, 복사해서 연구해 보았는데, 소스코드를 보니 복잡하지 않아서 정말 놀랐습니다. 그래서 이렇게 작은 프로젝트를 만들기 위해 React-Native를 사용하기 어려울까라는 생각이 들었습니다. 게다가 코드 세트를 작성하면 Android와 iOS 모두에서 실행할 수 있습니다. 작은 프로그램...), 와서 즐겨보는 건 어때요? 이 생각을 염두에 두고 나는 직접적으로 리액트 네이티브 init 프로젝트를 작성해 봅시다 (๑•̀ㅂ•́)وcade

기술 프레임워크 및 구성 요소

• 반응 "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- 네이티브 로딩 스피너 오버레이: "0.5.2"

Mobx를 사용하는 이유는 무엇인가요?

Mobx는 React-redux보다 간단하고 시작하기 빠른 확장 가능한 상태 관리 도구입니다. 이 소규모 프로젝트에서는 백그라운드 서비스 인터페이스가 없기 때문에 구현을 시뮬레이션하기 위해 모든 로컬 가짜 데이터가 사용됩니다. 항목 찾아보기 =>장바구니에 추가=>결제=>장바구니 지우기=>항목을 원래 상태로 복원 이러한 과정에서 Mobx는 모든 데이터와 상품 상태(선택 여부, 장바구니에 담았는지 여부)를 관리하는 데 사용되며, 모든 페이지에서 데이터를 공유하고 상품 상태를 변경할 수 있으며, 데이터와 페이지 간 제품 상태는 동기적으로 업데이트될 수 있습니다. 구체적으로 Mobx를 사용하여 이 프로세스를 구현하는 방법에 대해 아래에서 사용 경험과 몇 가지 함정을 공유하겠습니다.

시작

첫 번째 반응 네이티브 프로젝트를 초기화한 다음 Yarn 또는 npm을 사용하여 모든 종속 항목과 구성 요소를 설치합니다. Mobx를 사용하면 ES7에서는 데코레이터를 사용하게 되므로 설치해야 합니다. babel-plugin-transform- decorators-legacy 플러그인을 선택한 다음 .babelrc 파일 아래에 일부 콘텐츠를 추가하세요.

rreee

프로젝트 구조

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

Root.js 파일에서 React-Navigation의 구성 및 사용과 관련하여 공식 문서와 이 블로그를 참조할 수 있으며, 이 두 기사에서 React-Navigation에 대한 질문에 대한 답변을 찾았습니다. 관련 반응 탐색 구성, 사용 방법 및 프로젝트 페이지 레이아웃 및 구성 요소 작성은 상대적으로 간단하므로 여기서는 자세히 설명하지 않겠습니다. Mobx의 구현 방법에 대한 것입니다. 기능. 화면 폴더 아래의 구성 요소에는 모두 주석이 표시됩니다(°-°〃)

주로 Mobx에 대해 이야기해보겠습니다

1. 데이터 저장 및 획득

이는 가짜 데이터를 사용하여 시뮬레이션되고 구현됩니다. 맨 처음에는 가짜 데이터의 데이터 구조를 작성합니다(예:

|-- 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 // 主入口

). Mobx 폴더에 있는 store.js는 주로 앱에서 사용하는 모든 제품의 데이터를 저장하고 관리하며, 컴포넌트의 로직과 상태를 독립적이고 테스트 가능한 단위로 이동합니다. 이 단위는 각 페이지에 있습니다. 어디에나 있어요

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

여기에서 RootStore는 모든 매장을 인스턴스화하는 데 사용됩니다(장바구니, 홈페이지 및 카테고리 페이지에는 자체 매장이 있음).

이처럼 매장은 RootStore를 통해 관리 및 운영이 가능하며, 서로 소통하고 레퍼런스를 공유할 수 있습니다.

두 번째로, Mobx의 @observable 메소드를 사용하여 데이터를 관찰자로 변환하는데, 사용자가 뷰를 조작하여 데이터가 변경되면 해당 뷰는 React-mobx에서 제공하는 @observer로 자동 업데이트될 수 있습니다. 매우 편리합니다.

또한 Mobx의 Rootstore를 React-native 구성 요소에 삽입하려면 Mobx-react에서 제공하는 Provider를 통해 구현해야 합니다. Root.js에 다음과 같이 썼습니다.

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 인스턴스를 컴포넌트 트리에 주입한 후 컴포넌트에서 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中文网其它相关文章！

推荐阅读：

Angular实现可添加删除与计算总金额效果插件

AngularJS实现猜数字小游戏

위 내용은 React-Native+Mobx로 쇼핑몰 APP 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!