เข้าใจกับ Button ใน React-Native

import { Button, View } from 'react-native';

const MyButton = () => {
  const handlePress = () => {
    // โปรแกรมทำงานอะไรต่อเมื่อมีการกดปุ่มนี้
  };

  return (
    <View>
       <Button title="Press me" onPress={handlePress} />
    </View>
  );
};

import { TouchableOpacity, Text, View } from 'react-native';

const MyButton = () => {
  const handlePress = () => {
    // Action to be performed when the button is pressed
  };

  return (
    <View>
       <TouchableOpacity onPress={handlePress}>
         <Text>Press me</Text>
       </TouchableOpacity>
    </View>
  );
};

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

const Timer = () => {
  const [isRunning, setIsRunning] = useState(false);
  const [seconds, setSeconds] = useState(25 * 60);

  useEffect(() => {
    let interval = null;

    if (isRunning) {
      interval = setInterval(() => {
        setSeconds((prevSeconds) => prevSeconds - 1);
      }, 1000);
    } else {
      clearInterval(interval);
    }

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

  const formatTime = (time) => {
    const minutes = Math.floor(time / 60);
    const seconds = time % 60;

    return `${minutes}:${seconds.toString().padStart(2, '0')}`;
  };

buttonContainer: {
      justifyContent: 'center',
      alignItems: 'center',
    },
    startButton: {
      paddingVertical: 20,
      paddingHorizontal: 40,
      borderRadius: 5,
      marginBottom: 10,
    },
    startButtonText: {
      fontSize: 20,
      textAlign: 'center',
      color: 'white',
    },
    startButtonGreen: {
      backgroundColor: 'green',
    },
    stopButtonRed: {
      backgroundColor: 'red',
    },
    resetButton: {
      backgroundColor: 'yellow',
      paddingVertical: 20,
      paddingHorizontal: 40,
      borderRadius: 5,
    },
    resetButtonText: {
      fontSize: 20,
      textAlign: 'center',
      color: 'black',
    },

return (
    <View style={styles.container}>
      <View style={styles.circle}>
        <Text style={styles.timerText}>{formatTime(seconds)}</Text>
      </View>
      <View style={styles.buttonContainer}>
        <TouchableOpacity
          style={[styles.startButton, isRunning ? styles.stopButtonRed : styles.startButtonGreen]}
          onPress={() => setIsRunning(!isRunning)}
        >
          <Text style={styles.startButtonText}>{isRunning ? 'Stop' : 'Start'}</Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={styles.resetButton}
          onPress={() => setSeconds(25 * 60)}
          disabled={isRunning}
        >
          <Text style={styles.resetButtonText}>Reset</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

export default Timer;

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

const Timer = () => {
  const [isRunning, setIsRunning] = useState(false);
  const [seconds, setSeconds] = useState(25 * 60);

  useEffect(() => {
    let interval = null;

    if (isRunning) {
      interval = setInterval(() => {
        setSeconds((prevSeconds) => prevSeconds - 1);
      }, 1000);
    } else {
      clearInterval(interval);
    }

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

  const formatTime = (time) => {
    const minutes = Math.floor(time / 60);
    const seconds = time % 60;

    return `${minutes}:${seconds.toString().padStart(2, '0')}`;
  };

  const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
    },
    circle: {
      width: 200,
      height: 200,
      borderRadius: 100,
      borderWidth: 10,
      borderColor: 'red',
      justifyContent: 'center',
      alignItems: 'center',
      marginBottom: 20,
    },
    timerText: {
      fontSize: 60,
      fontWeight: 'bold',
      textAlign: 'center',
    },
    buttonContainer: {
      justifyContent: 'center',
      alignItems: 'center',
    },
    startButton: {
      paddingVertical: 20,
      paddingHorizontal: 40,
      borderRadius: 5,
      marginBottom: 10,
    },
    startButtonText: {
      fontSize: 20,
      textAlign: 'center',
      color: 'white',
    },
    startButtonGreen: {
      backgroundColor: 'green',
    },
    stopButtonRed: {
      backgroundColor: 'red',
    },
    resetButton: {
      backgroundColor: 'yellow',
      paddingVertical: 20,
      paddingHorizontal: 40,
      borderRadius: 5,
    },
    resetButtonText: {
      fontSize: 20,
      textAlign: 'center',
      color: 'black',
    },
  });

  return (
    <View style={styles.container}>
      <View style={styles.circle}>
        <Text style={styles.timerText}>{formatTime(seconds)}</Text>
      </View>
      <View style={styles.buttonContainer}>
        <TouchableOpacity
          style={[styles.startButton, isRunning ? styles.stopButtonRed : styles.startButtonGreen]}
          onPress={() => setIsRunning(!isRunning)}
        >
          <Text style={styles.startButtonText}>{isRunning ? 'Stop' : 'Start'}</Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={styles.resetButton}
          onPress={() => setSeconds(25 * 60)}
          disabled={isRunning}
        >
          <Text style={styles.resetButtonText}>Reset</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};
  );
};

export default Timer;