react native 使用setInterval构建计时器demo

来源：互联网发布：腾讯云域名和ip绑定编辑：程序博客网时间：2024/05/19 18:17

定时器：

setTimeout, clearTimeout
setInterval, clearInterval
setImmediate, clearImmediate
requestAnimationFrame, cancelAnimationFrame
这是官方的手册上提供的，我用的是setIntelval,因为自己是学的前端，整个列子使用的是es6的语法。

下面是截图：

以下是代码：

  1  2  3  4  5  6  7  8  9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
 TextInput,
 TouchableOpacity
} from 'react-native';
export default class AnimateDemo extends Component {
  constructor(props){
    super(props);
    this.state={
      data:0
    }
    this._index=0;
    this._timer=null;
  }
  countTime(){
    this._timer=setInterval(()=>{this.setState({data:this._index--}); if(this.state.data<=0){
        this._timer && clearInterval(this._timer);
        alert("时间到了");
    }},1000);
  }
  stopTime(){
      this._timer && clearInterval(this._timer);
  }
  componentWillUnmount() {
    this._timer && clearInterval(this._timer);
  }
 render() {
    return (
        <View style={styles.container}>
          <Text>请选择时长(s)</Text>
          <TextInput onChangeText={(txt)=>{this.setState({data:txt});this._index=txt;}}>
          </TextInput>
          <View style={styles.showTime}>
            <Text style={styles.timeText}>
              {this.state.data}
            </Text>
          </View>
          <View style={styles.btngroup}>
              <TouchableOpacity style={styles.btn} onPress={this.countTime.bind(this)
              }>
                  <Text>开始</Text>
                 
              </TouchableOpacity>
               <TouchableOpacity style={styles.btn} onPress={this.stopTime.bind(this)}>
                  <Text>暂停</Text>
                 
              </TouchableOpacity>
          </View>
        </View>
    );
  }
}
const styles=StyleSheet.create({
  container:{
     flex:1,
    },
    btngroup:{
      flexDirection:'row',
      
      justifyContent:'space-around'
    },
    showTime:{
      height:100,
      alignItems:'center'
    },
    btn:{
      justifyContent:'center',
      width:60,
      height:40,
      backgroundColor:'#7ecfe8',
      alignItems:'center'
    },
    timeText:{
      color:'red',
      fontSize:22,
    }
})
AppRegistry.registerComponent('AnimateDemo', () => AnimateDemo);

阅读全文

0 0