Created
December 29, 2019 21:49
-
-
Save TiagoSSGaspar/50c65f867fcb6d30b5ac0804b2ff3673 to your computer and use it in GitHub Desktop.
Cronômentro com react-native
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React, {Component} from 'react'; | |
| import {Image, View, Text, StyleSheet, TouchableOpacity} from "react-native"; | |
| import interopRequireDefault from "@babel/runtime/helpers/esm/interopRequireDefault"; | |
| export default class App extends Component { | |
| constructor(props) { | |
| super(props); | |
| this.state = { | |
| numero: 0, | |
| btn: 'Start', | |
| lastTimer: null | |
| }; | |
| this.timer = null; | |
| this.timerStart = this.timerStart.bind(this); | |
| this.timerStop = this.timerStop.bind(this); | |
| } | |
| timerStart(){ | |
| if(this.timer != null){ | |
| clearInterval(this.timer); | |
| this.timer = null | |
| this.setState({btn: 'Start'}) | |
| }else { | |
| this.timer = setInterval(() => { | |
| this.setState({numero: this.state.numero + 0.1}) | |
| }, 100 ); | |
| this.setState({btn: 'Stop'}) | |
| } | |
| } | |
| timerStop(){ | |
| if(this.timer != null){ | |
| clearInterval(this.timer); | |
| this.timer = null; | |
| }else { | |
| this.setState({ | |
| lastTimer: this.state.numero, | |
| numero: 0, | |
| btn: 'Start', | |
| }); | |
| } | |
| } | |
| render() { | |
| return ( | |
| <View style={style.container}> | |
| <Image source={require('./src/cronometro.png')}/> | |
| <Text style={style.timer}>{this.state.numero.toFixed(1)}</Text> | |
| <View style={style.btnAreaAll}> | |
| <TouchableOpacity style={style.btn} onPress={this.timerStart}> | |
| <Text style={style.btnTexto}>{this.state.btn}</Text> | |
| </TouchableOpacity> | |
| <TouchableOpacity style={style.btn} onPress={this.timerStop}> | |
| <Text style={style.btnTexto}>Clear</Text> | |
| </TouchableOpacity> | |
| </View> | |
| <View style={style.areaLastTime}> | |
| <Text style={style.textLastTime}>{this.state.lastTimer > 0 ? 'Last Time: ' + this.state.lastTimer.toFixed(2) +'m/s' : ''}</Text> | |
| </View> | |
| </View> | |
| ); | |
| } | |
| } | |
| const style = StyleSheet.create({ | |
| container: { | |
| flex: 1, | |
| backgroundColor: 'gray', | |
| alignItems: 'center', | |
| justifyContent: 'center' | |
| }, | |
| timer: { | |
| marginTop: -165, | |
| color: '#fff', | |
| fontSize: 65, | |
| fontWeight: 'bold' | |
| }, | |
| btnAreaAll:{ | |
| flexDirection: 'row', | |
| marginTop: 100, | |
| height: 40 | |
| }, | |
| btn:{ | |
| flex: 1, | |
| justifyContent: 'center', | |
| alignItems: 'center', | |
| backgroundColor: '#fff', | |
| height: 40, | |
| borderRadius: 40, | |
| borderWidth: 1, | |
| margin: 10 | |
| }, | |
| btnTexto:{ | |
| fontSize: 20, | |
| fontStyle: 'italic', | |
| fontWeight: 'bold', | |
| color: 'gray' | |
| }, | |
| areaLastTime:{ | |
| marginTop: 70 | |
| }, | |
| textLastTime:{ | |
| fontSize: 25, | |
| fontWeight: 'bold', | |
| fontStyle: 'italic', | |
| color: '#fff' | |
| } | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment