发布于 2017-10-06 02:53:22 | 209 次阅读 | 评论: 0 | 来源: 网友投递
Android移动端操作系统
Android是一种基于Linux的自由及开放源代码的操作系统,主要使用于移动设备,如智能手机和平板电脑,由Google公司和开放手机联盟领导及开发。尚未有统一中文名称,中国大陆地区较多人使用“安卓”或“安致”。
开发过程中有获取手机验证码的场景,这时候有这样的要求:
1,点击“获取验证码”的按钮,发起获取验证码的网络请求,同时按钮置为不可用
2,如果网络请求成功,按钮继续不可用,但按钮上文本改为倒计时((*s)后重新获取)
3,如果网络请求失败,按钮置为可用
4,倒计时结束,按钮可用
直接上代码
源码
import React,{PropTypes} from 'react';
import {View,Text,TouchableOpacity} from 'react-native';
export default class TimerButton extends React.Component {
constructor(props) {
super(props)
this.state = {
timerCount: this.props.timerCount || 90,
timerTitle: this.props.timerTitle || '获取验证码',
counting: false,
selfEnable: true,
};
this._shouldStartCountting = this._shouldStartCountting.bind(this)
this._countDownAction = this._countDownAction.bind(this)
}
static propTypes = {
style: PropTypes.object,
textStyle: Text.propTypes.style,
onClick: PropTypes.func,
disableColor: PropTypes.string,
timerTitle: PropTypes.string,
enable: React.PropTypes.oneOfType([React.PropTypes.bool,React.PropTypes.number])
};
_countDownAction(){
const codeTime = this.state.timerCount;
this.interval = setInterval(() =>{
const timer = this.state.timerCount - 1
if(timer===0){
this.interval&&clearInterval(this.interval);
this.setState({
timerCount: codeTime,
timerTitle: this.props.timerTitle || '获取验证码',
counting: false,
selfEnable: true
})
}else{
console.log("---- timer ",timer);
this.setState({
timerCount:timer,
timerTitle: `重新获取(${timer}s)`,
})
}
},1000)
}
_shouldStartCountting(shouldStart){
if (this.state.counting) {return}
if (shouldStart) {
this._countDownAction()
this.setState({counting: true,selfEnable:false})
}else{
this.setState({selfEnable:true})
}
}
componentWillUnmount(){
clearInterval(this.interval)
}
render(){
const {onClick,style,textStyle,enable,disableColor} = this.props
const {counting,timerTitle,selfEnable} = this.state
return (
<TouchableOpacity activeOpacity={counting ? 1 : 0.8} onPress={()=>{
if (!counting && enable && selfEnable) {
this.setState({selfEnable:false})
this.props.onClick(this._shouldStartCountting)
};
}}>
<View style={[{width:100, height:44,flex:1,justifyContent:'center',alignItems:'center'},style]}>
<Text style={[{fontSize: 16},textStyle,{color: ((!counting && enable && selfEnable) ? textStyle.color : disableColor || 'gray')}]}>{timerTitle}</Text>
</View>
</TouchableOpacity>
)
}
}
使用
<TimerButton enable={phoneNumber.length}
style={{width: 110,marginRight: 10}}
textStyle={{color: StaticColor.COLOR_MAIN}}
timerCount={10}
onClick={(shouldStartCountting)=>{
this._requestSMSCode(shouldStartCountting)
}}/>
onClick
:触发后按钮selfEnable
会立即被置为false
onClick
中的一系列逻辑处理之后需要调用回调函数结束倒计时shouldStartCountting
:回调函数,接受一个Bool
类型的参数
shouldStartCountting(true)
,开始倒计时,倒计时结束时自动恢复初始状态shouldStartCountting(false)
, 按钮的selfEnable
会立即被置为true
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持PHPERZ。