項目需要寫了一個最簡單的發(fā)送驗證碼的按鈕留拾。雖然功能很簡單书斜，但是萬一要是有人需要呢袍辞？
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 固有的缺陷
// 相親請移步到 http://www.reibang.com/p/db9caa6bd2b1 中的超時調用一節(jié)
setTimeout(this.countDown.bind(this),1000);
}
}
timeout(){
try {
if(typeof this.props.action === "function") { //是函數(shù) 其中 FunName 為函數(shù)名稱
this.props.action();
} else { //不是函數(shù)
//alert("not is function");
console.log('action not is function');
}
} catch(e) {}
this.countDown();
}
}
組件使用的很簡單颓哮，
TouchableOpacity 用來實現(xiàn)點擊效果和一些樣式，并且根據(jù)狀態(tài)(state) 來判斷是否執(zhí)行方法
Text根據(jù)不同的狀態(tài)（state）顯示不同的內容珊豹，倒計時或者是“顯示獲取驗證碼”
使用如下方式調用
//time 是從多少秒開始倒計時簸呈，action傳遞點擊發(fā)送驗證碼觸發(fā)的方法
<GainIdentify time={60} action={this.gainIdentify.bind(this)}/>
gainIdentify(){
console.log("獲取驗證碼方法");
}
以上，如果有對代碼更好的建議店茶，可以聯(lián)系我哦蜕便。
QQ:674054067
