计时器60s

Posted 2020-08-29 xiaojun_zxj

计时器是经常用到的功能，下面以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>
        )
    }
}