计时器是经常用到的功能，下面以react nativ的例子简介来写一个倒计时60s的小demo。
代码如下：
import React, { Component } from 'react';
import {
Text,
View,
TouchableOpacity
} from 'react-native';
import {
Button,
Content,
Container,
Header,
InputGroup,
Input,
List,
ListItem,
Thumbnail,
Title,
} from 'native-base';
import MyTheme from '../../themes/myTheme';
import SetNewPasswordView from './../login-register/set-newPassword-view'
export default class FindPasswordView extends Component {
constructor(props) {
super(props);
this.state = {
data: 60,
sendButton: true
};
this._index = 60;
this._timer = null;
}
countTime() {
this.setState({sendButton: false});
this._timer = setInterval(()=> {
this.setState({data: this._index--});
if (this.state.data <= 0) {
this._timer && clearInterval(this._timer);
this.setState({sendButton: true});
}
}, 1000);
}
componentWillUnmount() {
this._timer && clearInterval(this._timer);
}
_navigate(name, component, role, type = 'Normal') {
this.props.navigator.push({
component: component,
name: name,
passProps: {
name: name,
role: role
},
onPress: this._onPress,
rightText: '右边',
type: type
})
}
render() {
return (
<Container theme={MyTheme}>
<Header>
<Button transparent onPress={()=>this.props.navigator.pop()}>
<Text style={{color:'#35b873'}}>取消</Text>
</Button>
<Title>找回密码</Title>
</Header>
<Content style={{backgroundColor:'#eff2f3'}}>
<View
style={{flex:1,flexDirection:'row',backgroundColor:'#fff',marginTop:20,borderBottomWidth:0.5,borderColor:'#ccc'}}>
<Text style={{marginTop:13,marginLeft:15}}>手机号</Text>
<Input style={{marginLeft:20}} placeholderTextColor={'#ccc'} placeholder="请输入手机号..."/>
</View>
<ListItem
style={{backgroundColor:'#fff',paddingLeft:0,marginLeft:0,marginTop:20,borderBottomWidth:0}}>
<InputGroup>
<Input style={{marginLeft:5,marginRight:10}} placeholderTextColor={'#ccc'}
placeholder="请输入验证码..."/>
{
this.state.sendButton ? <Button style={{marginLeft:5,marginRight:10}} small success
onPress={this.countTime.bind(this)}>发送验证码</Button> :
<Button disabled style={{marginLeft:5,marginRight:10}}
small>请等待{this.state.data}s</Button>
}
</InputGroup>
</ListItem>
<Button block success onPress={()=>this._navigate('找回密码',SetNewPasswordView)}
style={{marginLeft:15,marginRight:15,marginTop:40,padding:15,height:45}}>
验证
</Button>
</Content>
</Container>
)
}
}