项目需要写了一个最简单的发送验证码的按钮。虽然功能很简单,但是万一要是有人需要呢?
export class GainIdentify extends Component{
static propTypes = {
action:PropTypes.func,
time:PropTypes.number,
}
static defaultProps = {
action:function(){
console.log('未定义方法')
},
time:60
}
constructor(props){
super(props);
this.state={
timing:this.props.time,
}
}
render(){
return (
<TouchableOpacity
style={{
alignItems:'center',
marginLeft:10,
width:90,
}}
activeOpacity={1}
onPress={this.state.timing==this.props.time?this.timeout.bind(this):null}
>
<Text>
{this.state.timing==this.props.time?'获取验证码':this.state.timing+'s'}
</Text>
</TouchableOpacity>
);
}
countDown(){
if(this.state.timing == 0){
this.setState({
timing:60,
})
}else{
this.setState({
timing:this.state.timing-1,
});
//这里使用 setTimeout 不是因为不知道setInterval 而是因为setInterval 固有的缺陷
// 相亲请移步到 //www.greatytc.com/p/db9caa6bd2b1 中的超时调用一节
setTimeout(this.countDown.bind(this),1000);
}
}
timeout(){
try {
if(typeof this.props.action === "function") { //是函数 其中 FunName 为函数名称
this.props.action();
} else { //不是函数
//alert("not is function");
console.log('action not is function');
}
} catch(e) {}
this.countDown();
}
}
组件使用的很简单,
TouchableOpacity 用来实现点击效果和一些样式,并且根据状态(state) 来判断是否执行方法
Text根据不同的状态(state)显示不同的内容,倒计时或者是“显示获取验证码”
使用如下方式调用
//time 是从多少秒开始倒计时,action传递点击发送验证码触发的方法
<GainIdentify time={60} action={this.gainIdentify.bind(this)}/>
gainIdentify(){
console.log("获取验证码方法");
}
以上,如果有对代码更好的建议,可以联系我哦。
QQ:674054067