Как реализовать секундомер react native?

 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

import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';

const Stopwatch = () => {
  const [time, setTime] = useState(0);
  const [isRunning, setIsRunning] = useState(false);

  useEffect(() => {
    let intervalId;

    if (isRunning) {
      intervalId = setInterval(() => {
        setTime(prevTime => prevTime + 1);
      }, 1000);
    }

    return () => clearInterval(intervalId);
  }, [isRunning]);

  const handleStart = () => {
    setIsRunning(true);
  };

  const handleStop = () => {
    setIsRunning(false);
    setTime(0);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.time}>{time}</Text>
      <View style={styles.buttons}>
        {isRunning ? (
          <TouchableOpacity onPress={handleStop}>
            <Text style={styles.button}>Stop</Text>
          </TouchableOpacity>
        ) : (
          <TouchableOpacity onPress={handleStart}>
            <Text style={styles.button}>Start</Text>
          </TouchableOpacity>
        )}
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  time: {
    fontSize: 50,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  buttons: {
    flexDirection: 'row',
  },
  button: {
    backgroundColor: 'gray',
    color: 'white',
    padding: 10,
    marginHorizontal: 5,
  },
});

export default Stopwatch;

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

import React from 'react';
import { View } from 'react-native';
import Stopwatch from './Stopwatch';

const App = () => {
  return (
    <View>
      <Stopwatch />
    </View>
  );
};

export default App;