其中，后期会加入动画等其他。本期先实现基础功能。
二：基于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 ( <ShoppingItemComponent itemData={item} money={this.getMoney} /> ) }; 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 ( <View style={{ height : 10, backgroundColor : '#e9e9e9' }}/> ) }; keyExtractor = (item) => item.name; render() { let { allSelecte, totalMoney } = this.state; return ( <View style={styles.container}> <FlatList data={data.datas} ItemSeparatorComponent={this.separatorView} renderItem={({ item }) => this.renderItem(item)} keyExtractor={ this.keyExtractor } /> <View style={styles.tool}> <View style={{ flex : 1, flexDirection : 'row', alignItems : 'center' }}> <TouchableOpacity style={styles.select} onPress={ this.allSelect }> <Image source={allSelecte ? require('./imgs/login_radio_selected.png') : require('./imgs/login_radio_normall.png')}/> <Text style={{ marginLeft : 3 }}>全选</Text> </TouchableOpacity> <Text style={styles.allMoneyText}> ￥{this.state.totalMoney} </Text> </View> <TouchableOpacity style={styles.balance}> <Text style={styles.balanceText}>去结算</Text> </TouchableOpacity> </View> </View> ); } }
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 <= 1) { if(this.state.isSel){ this.setState({isSel :!this.state.isSel}); this.setMoney(-this.state.money) } return; } 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; }); }; 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 ( <View style={ styles.container }> <TouchableOpacity style={{ marginLeft : 15 }} onPress={() => this.itemSelect(itemData)}> <Image source={isSel ? require('./imgs/login_radio_selected.png') : require('./imgs/login_radio_normall.png')}/> </TouchableOpacity> <Image style={ styles.icon } source={{ uri : img }}/> <View style={ styles.right }> <Text style={ styles.nameStyle } numberOfLines={ 2 }>{ name }</Text> <Text style={ styles.descriptionStyle } numberOfLines={1}>{ description }</Text> <View style={ styles.right_bot}> < Text style={ styles.moneyStyle }>￥{ money }</Text> <View style={ styles.numControllStyle }> <TouchableOpacity style={ styles.reduceStyle } onPress={() => this.itemReduce(selNum)}> <Text style={{ color : selNum <= 1 ? 'red' : 'black' } }>-</Text> </TouchableOpacity> <View style={ styles.numberViewStyle }> <Text style={ styles.numberStyle }>{ selNum }</Text> </View> <TouchableOpacity style={ styles.increaseStyle } onPress={() => this.itemIncrease(selNum)}> <Text>+</Text> </TouchableOpacity> </View> </View> </View> </View> ); } }
三：基于Mobx实现购物车
1-：MobxShoppingCarPage.js