React Native 利用自定义button封装购物车计数器
来源:互联网 发布:php字符串替换 全部 编辑:程序博客网 时间:2024/06/01 07:58
本文button见我的博客 button
使用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, },})
<Stepper onChange={(val) => {Console.log(val)}} defaultValue={1} min={1} max={100} step={1} />
阅读全文
0 0
- React Native 利用自定义button封装购物车计数器
- React Native 封装自定义的Button
- React Native自定义Button
- React Native 自定义圆角button的封装
- react-native--万能Button封装
- React Native 购物车数量红色小角标封装
- swift 自定义购物车计数器
- React native自定义组件之Button按钮
- React Native Button实现
- react-native Button
- React Native Button使用
- react native button 按钮
- React-Native(三)--Button
- react native封装UI
- react native Toast封装
- react-native http封装
- react-native modal封装
- React Native 控件封装
- servlet获取HttpServletRequest、HttpServletResponse
- Android兼容包Support v4.v7.v13区别与应用场景
- 在CentOS7中利用yum命令安装mysql
- Java Web学习总结(41)——Java EE 8 新功能展望
- A
- React Native 利用自定义button封装购物车计数器
- springboot怎么使用maven打包时将本地jar包一块打进去
- 用Jmeter搭建HTTP接口自动化引擎 1.0 版本
- 明星加持,资本涌入,爆火的教育行业随随便便年薪百万?
- UVA 1515 Pool construction
- AI大事件 | 人类理解行为数据集推出,Uber发布自家分布式深度学习框架
- 用公开语料推进NLP研究,孵化现象级产品 | 专访阿里AI Labs聂再清
- Java并发编程-同步辅助类之Phaser
- ThinkPHP根据时间显示不同的问候语