Advertisement
Guest User

Untitled

a guest
Apr 22nd, 2019
71
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.44 KB | None | 0 0
  1. const WORK_TIME = 10
  2. const DEVICE = {...Dimensions.get('window')}
  3.  
  4. class TimerButton extends React.PureComponent {
  5. render() {
  6. return (
  7. <TouchableOpacity onPress={this.props.onPress} style={styles.button} activeOpacity={0.7}>
  8. <Text style={styles.buttonText}>{this.props.title}</Text>
  9. </TouchableOpacity>
  10. )
  11. }
  12. }
  13.  
  14. export default class App extends React.Component {
  15.  
  16. state = {
  17. time: WORK_TIME,
  18. value: new Animated.Value(0)
  19. }
  20.  
  21. start = () => {
  22. if (!this._interval) {
  23.  
  24. Animated.timing(this.state.value, {
  25. toValue: WORK_TIME,
  26. duration: WORK_TIME * 1000,
  27. }).start()
  28.  
  29. this._interval = setInterval(() => {
  30. if (this.state.time === 0) {
  31. alert('Пора отдохнуть!')
  32. this.reset();
  33. } else {
  34. this.setState({time: this.state.time - 1})
  35. }
  36. }, 1000)
  37. }
  38. }
  39.  
  40. stop = () => {
  41. this.state.value.stopAnimation();
  42. clearInterval(this._interval);
  43. this._interval = null;
  44. }
  45.  
  46. reset = () => {
  47. this.setState({ time: WORK_TIME, value: new Animated.Value(0) })
  48. this.stop()
  49. }
  50.  
  51. render() {
  52.  
  53. let minutes = this.state.time / 60;
  54. minutes = Math.floor(minutes);
  55.  
  56. let seconds = this.state.time % 60;
  57.  
  58. seconds = seconds >= 10 ? seconds : `0${seconds}`
  59. minutes = minutes >= 10 ? minutes : `0${minutes}`
  60.  
  61. let rotate = this.state.value.interpolate({
  62. inputRange: [0, WORK_TIME],
  63. outputRange: ["0deg", "3600deg"]
  64. })
  65.  
  66. return (
  67. <View style={styles.container}>
  68.  
  69. <Animated.View style={{ transform: [ { rotateZ: rotate } ] }} >
  70. <Image
  71. source={{ uri: "https://opencollective-production.s3-us-west-1.amazonaws.com/524dec00-39e2-11e7-a19f-69aad0543ddc.png" }}
  72. style={{ width: 150, height: 150 }}
  73. />
  74. </Animated.View>
  75.  
  76. <Text style={styles.text}>{`${minutes}:${seconds}`}</Text>
  77. <View style={styles.buttons}>
  78. <TimerButton title='Start' onPress={this.start} />
  79. <TimerButton title='Stop' onPress={this.stop} />
  80. <TimerButton title='Reset' onPress={this.reset} />
  81. </View>
  82. </View>
  83. )
  84. }
  85. }
  86.  
  87. const styles = StyleSheet.create({
  88. line: {
  89. alignSelf: 'flex-start',
  90. backgroundColor: 'red',
  91. height: 40
  92. },
  93. img: {
  94. alignSelf: 'center',
  95. height: 100,
  96. width: 100,
  97. borderRadius: 40,
  98. },
  99. container: {
  100. flex: 1,
  101. backgroundColor: "steelblue",
  102. justifyContent: "center",
  103. alignItems: "center"
  104. },
  105. text: {
  106. fontSize: 46,
  107. fontWeight: '600',
  108. letterSpacing: 3
  109. },
  110. buttons: {
  111. height: 300,
  112. justifyContent: "space-evenly"
  113. },
  114. buttonText: {
  115. fontSize: 24,
  116. fontWeight: '400',
  117. letterSpacing: 3
  118. },
  119. button: {
  120. borderRadius: 4,
  121. backgroundColor: "rgba(0, 0, 0, 0.3)",
  122. width: 200,
  123. height: 50,
  124. justifyContent: "center",
  125. alignItems: "center"
  126. }
  127. })
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement