React Native 利用自定义button封装购物车计数器

逃离我推掉我的手 2022-05-09 13:42 253阅读 0赞

使用button,简单封装一个购物车计数器

import React, { Component } from 'react';
    import {
        StyleSheet,
        View,
        Text,
        Dimensions
    } from 'react-native';
    import Button from '../button';
    const { width, height } = Dimensions.get('window');
    //模块声名并导出
    export default class Stepper extends Component { 
        //属性声名
        static propTypes = {
            min: React.PropTypes.number, // 最小值
            max: React.PropTypes.number, // 最大值
            step: React.PropTypes.number, // 增减数
            defaultValue: React.PropTypes.number, // 默认值
            onChange: React.PropTypes.func, // 
        };
        //默认属性
        static defaultProps = {
            min: 1, // 默认最小值
            max: 99, // 默认最大值
            step: 1, // 增减数为1
            defaultValue: 1, // 默认值为1 
        }
        //构造函数
        constructor(props) {
            super(props);
            this.state = { //状态机变量声明
                currentNumber: this.props.defaultValue,
                interval: 200,//控制增加、减少数量间隔
            }
        }
    
        //渲染
        render() {
            console.log('-------',this.props.defaultValue);
            return (
                <View style={[styles.container,this.props.style]}>
                    <View style={
       { flexDirection: 'row', borderColor: '#e1e1e1', borderWidth: 0.5, borderRadius: 4 }}>
                        <Button
                            style={[styles.buttonStyle,]}
                            underlayColor='#ffffff88'
                            txtStyle={
       { color: 'black', fontSize: 14 }}
                            onPress={() => { this.decrease() }}
                            onLongPress={() => this.longDecrease()}
                            onPressOut={() => this.onTouchEnd()}>－</Button>
                        <View style={
       { alignItems: 'center', justifyContent: 'center', borderLeftWidth: 0.5, borderRightWidth: 0.5, borderColor: '#e1e1e1' }}>
                            <Text style={
       { textAlign: 'center', fontSize: 16, width: 40 }}>{
       this.props.defaultValue}</Text>
                        </View>
    
                        <Button
                            style={[styles.buttonStyle,]}
                            underlayColor='#ffffff88'
                            txtStyle={
       { color: 'black', fontSize: 14 }}
                            onPress={() => { this.increase() }}
                            onLongPress={() => this.longIncrease()}
                            onPressOut={() => this.onTouchEnd()}>＋</Button>
                    </View>
                </View>
            );
        }
    
        decrease() { // 单击减少
            let newValue = this.props.defaultValue - this.props.step;
            if (newValue < this.props.min) {
                newValue = this.props.min;
            }
            this.setState({
                currentNumber: newValue,
            }, () => {
                this.onChange(newValue)
            })
        }
    
        increase() { // 单击增加
            let newValue = this.props.defaultValue + this.props.step;
    
            if (newValue > this.props.max) {
                newValue = this.props.max;
            }
            this.setState({
                currentNumber: newValue
            }, () => {
                this.onChange(newValue)
            })
        }
    
        onChange(newValue) {
            if (this.props.onChange) {
                this.props.onChange(newValue)
            }
        }
    
        longDecrease() { // 长按减少
            this.autoInterval = setInterval(this.decrease.bind(this), this.state.interval);
        }
    
        longIncrease() { // 长按增加
            this.autoInterval = setInterval(this.increase.bind(this), this.state.interval);
        }
    
        onTouchEnd() { // 手指离开的时候，移除定时器
            if (this.autoInterval) {
                clearInterval(this.autoInterval)
                this.autoInterval = null;
            }
        }
    };
    
    const styles = StyleSheet.create({
        container: {
            flexDirection: 'row',
            //width: 200,
        },
        buttonStyle: {
            borderRadius: 4,
            paddingTop: 5,
            paddingBottom: 5,
            width: 30,
            height: 22,
        },
    })
    
     
      
       1
       2
       3
       4
       5
       6
       7
       8
       9
       10
       11
       12
       13
       14
       15
       16
       17
       18
       19
       20
       21
       22
       23
       24
       25
       26
       27
       28
       29
       30
       31
       32
       33
       34
       35
       36
       37
       38
       39
       40
       41
       42
       43
       44
       45
       46
       47
       48
       49
       50
       51
       52
       53
       54
       55
       56
       57
       58
       59
       60
       61
       62
       63
       64
       65
       66
       67
       68
       69
       70
       71
       72
       73
       74
       75
       76
       77
       78
       79
       80
       81
       82
       83
       84
       85
       86
       87
       88
       89
       90
       91
       92
       93
       94
       95
       96
       97
       98
       99
       100
       101
       102
       103
       104
       105
       106
       107
       108
       109
       110
       111
       112
       113
       114
       115
       116
       117
       118
       119
       120
       121
       122
       123
       124
       125

<Stepper
           onChange={(val) => {Console.log(val)}}
           defaultValue={1}
           min={1}
           max={100}
           step={1} />
     
      
       1
       2
       3
       4
       5
       6

</div>