本篇文章主要介绍了React-Native使用Mobx实现购物车功能，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
在工作中，购物车场景非常常见。本文实现基于React-Native和Mobx实现两种购物车例子。
其中，后期会加入动画等其他。本期先实现基础功能。
二：基于State实现购物车
1-：ShoppingCarPage.js
export default class ShoppingCarPage extends Component { static navigationOptions = { headerTitle : '基于State购物车', }; constructor(props) { super(props); this.state = { allSelecte : data.isAllSelect, totalMoney : data.totalMoney, } }; getMoney = (m) => { this.state.totalMoney=this.state.totalMoney+m; //this.state.totalMoney += m; data.totalMoney = this.state.totalMoney; this.setState({ totalMoney : this.state.totalMoney }); let i = 0; data.datas.map((item) => { if (item.isSelect != true) { i += 1; } }); if (i == 0) { data.isAllSelect = true; this.setState({ allSelecte : true }) } else { data.isAllSelect = false; this.setState({ allSelecte : false }) } }; renderItem = (item) => { return ( ) }; allSelect = () => { data.totalMoney = 0; data.isAllSelect = !data.isAllSelect; this.state.totalMoney = 0; DeviceEventEmitter.emit('allSelect', !this.state.allSelecte); this.setState({ allSelecte : !this.state.allSelecte }) }; separatorView = () => { return ( ) }; keyExtractor = (item) => item.name; render() { let { allSelecte, totalMoney } = this.state; return ( this.renderItem(item)} keyExtractor={ this.keyExtractor } /> 全选 ￥{this.state.totalMoney} 去结算 ); } }
2-：ShoppingItemComponent.js
export default class ShoppingItemComponent extends Component { static propTypes = { itemData : PropTypes.object.isRequired, money : PropTypes.func, }; static defaultProps = { money : () => null, }; componentDidMount() { this.subscription = DeviceEventEmitter.addListener('allSelect', (isSelAll) => { this.props.itemData.isSelect = isSelAll; this.setState({ isSel : isSelAll }); if (isSelAll) { this.setMoney(this.state.money * this.state.selNum); } }) }; componentWillUnmount() { this.subscription && this.subscription.remove(); }; constructor(props) { super(props); this.state = { isSel : this.props.itemData.isSelect, selNum : this.props.itemData.count, money : this.props.itemData.money, name : this.props.itemData.name, description : this.props.itemData.description, img : this.props.itemData.img, } }; itemSelect = (item) => { this.setState({isSel :!this.state.isSel},()=>{ if (this.state.isSel) { this.setMoney(this.state.money * this.state.selNum) } else { this.setMoney(-this.state.money * this.state.selNum) } }); }; itemIncrease = (i) => { i++; this.setState({selNum : i},()=>{ if (this.state.isSel) { this.setMoney(this.state.money) }else{ this.setState({isSel :true}); this.setMoney(this.state.money * this.state.selNum); } this.props.itemData.count = i; }); }; itemReduce = (i) => { if (i { if (this.state.isSel) { this.setMoney(-this.state.money) }else{ this.setState({isSel :true}); this.setMoney(this.state.money * this.state.selNum); } this.props.itemData.count = i; }); }; setMoney = (money) => { if (this.props.money) { this.props.money(money); } }; render() { let { itemData } = this.props; let { isSel, selNum, money, name, description, img } = this.state; return ( this.itemSelect(itemData)}> { name }{ description } ￥{ money } this.itemReduce(selNum)}> <text style={{ color : selnum - { selNum } this.itemIncrease(selNum)}> + ); } }
三：基于Mobx实现购物车
1-：MobxShoppingCarPage.js
@observer export default class MobxShoppingCarPage extends Component { static navigationOptions = { headerTitle : '基于MobX购物车', }; constructor(props) { super(props); this.data = new MobxStore(); }; componentDidMount() { this.data.replace(jsonData) }; @action allSelect = () => { DeviceEventEmitter.emit('allSelect', !this.data.itemData.isAllSelect); this.data.selectAll(); }; renderItem = (item) => { return ( ) }; separatorView = () => { return ( ) }; keyExtractor = (item) => item.name; render() { return ( this.renderItem(item) } keyExtractor={ this.keyExtractor } /> 全选 ￥{ this.data.itemData.totalMoney } 去结算 ); } }
2-：MobxShopItemComponent.js
@observer export default class MobxShopItemComponent extends Component { static propTypes = { itemData : PropTypes.object.isRequired, data : PropTypes.object.isRequired, }; constructor(props) { super(props); this.itemData = this.props.itemData; } componentDidMount() { this.subscription = DeviceEventEmitter.addListener('allSelect', (isSelAll) => { this.itemData.isSelect = isSelAll; }) }; componentWillUnmount() { this.subscription && this.subscription.remove(); }; @action selectPress = () => { this.itemData.isSelect = !this.itemData.isSelect; let money = this.itemData.money * this.itemData.count; if (this.itemData.isSelect) { this.props.data.increase(money); } else { this.props.data.reduce(money) } this.props.data.itemPress(); }; @action increase = () => { this.itemData.count += 1; if (this.itemData.isSelect) { this.props.data.increase(this.itemData.money); }else{ this.itemData.isSelect = !this.itemData.isSelect; this.props.data.increase(this.itemData.money * this.itemData.count); } }; @action reduce = () => { if (this.itemData.count <= 1) { if(this.itemData.isSelect){ this.itemData.isSelect = !this.itemData.isSelect; this.props.data.reduce(this.itemData.money); } return; } this.itemData.count -= 1; if (this.itemData.isSelect) { this.props.data.reduce(this.itemData.money); } }; render() { return ( { this.itemData.name } { this.itemData.description } ￥{ this.itemData.money } <text style={{ color : this.itemdata.count - { this.itemData.count } + ); } };
3-：MobxStore.js
import { observable, action, computed, autorun } from 'mobx'; export default class MobxStore { @observable itemData = {} //设置数据 replace = (data) => { this.itemData = data; } //按下的反选 itemPress = () => { let i = 0; this.itemData.datas.map((item) => { if (item.isSelect != true) { i += 1; } }); if (i == 0) { this.itemData.isAllSelect = true; } else { this.itemData.isAllSelect = false; } } //加 increase = (money) => { this.itemData.totalMoney += money; } //减 reduce = (money) => { this.itemData.totalMoney -= money; } //全选 selectAll = () => { this.itemData.isAllSelect = !this.itemData.isAllSelect; this.itemData.totalMoney = 0; if (this.itemData.isAllSelect) { for (let i = 0; i <this.itemData.datas.length; i++) { this.itemData.totalMoney += this.itemData.datas[ i ].money * this.itemData.datas[ i ].count; } } } }
四：
1-：代码github地址：https://github.com/erhutime/React-Navigation-All/tree/master/All/jscode/shoppingcar/src
2-：下载完成后，修改index.ios.js:入口文件如下：
运行效果如下：
import App from './jscode/shoppingcar/src/App' AppRegistry.registerComponent('All', () => App);
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。
以上就是React-Native使用Mobx实现购物车功能的详细内容，更多请关注本站其它相关文章！
