@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 ( <MobxShopItemComponent itemData={ item } data={ this.data }/> ) }; separatorView = () => { return ( <View style={{ height : 10, backgroundColor : '#e9e9e9' }}/> ) }; keyExtractor = (item) => item.name; render() { return ( <View style={ styles.container }> <FlatList data={ this.data.itemData.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={ this.data.itemData.isAllSelect ? require('../imgs/login_radio_selected.png') : require('../imgs/login_radio_normall.png') }/> <Text style={{ marginLeft : 3 }}>全选</Text> </TouchableOpacity> <Text style={ styles.allMoneyText }> ￥{ this.data.itemData.totalMoney } </Text> </View> <TouchableOpacity style={ styles.balance } onPress={ this.allSelect }> <Text style={ styles.balanceText }>去结算</Text> </TouchableOpacity> </View> </View> ); } }
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 ( <View style={ styles.container }> <TouchableOpacity style={{ marginLeft : 15 }} onPress={ this.selectPress }> <Image source={ this.itemData.isSelect ? require('../imgs/login_radio_selected.png') : require('../imgs/login_radio_normall.png') }/> </TouchableOpacity> <Image style={ styles.icon } source={{ uri : 'https://img10.360buyimg.com/n7/jfs/t4063/153/323373745/444727/87c24f22/58b11156N9be178c2.jpg' }}/> <View style={ styles.right }> <Text style={ styles.nameStyle } numberOfLines={ 2 }>{ this.itemData.name }</Text> <Text style={ styles.descriptionStyle } numberOfLines={1}> { this.itemData.description }</Text> <View style={ styles.right_bot}> < Text style={ styles.moneyStyle }>￥{ this.itemData.money }</Text> <View style={ styles.numControllStyle }> <TouchableOpacity style={ styles.reduceStyle } onPress={ this.reduce }> <Text style={{ color : this.itemData.count <= 1 ? 'red' : 'black' } }>-</Text> </TouchableOpacity> <View style={ styles.numberViewStyle }> <Text style={ styles.numberStyle }>{ this.itemData.count }</Text> </View> <TouchableOpacity style={ styles.increaseStyle } onPress={ this.increase }> <Text>+</Text> </TouchableOpacity> </View> </View> </View> </View> ); } };
3-：MobxStore.js