Skip to main content
0

สารจากผู้เขียน

สวัสดีเพื่อน ๆ ทุกคนกันด้วยนะครับ มาพบกับผมกันอีกแล้วจากระบบที่เขียนเรื่องการทำ Login ด้วย React Native ที่สอนทำไปครั้งที่แล้ว สำหรับบทความนี้ที่ผมจะมาแนะนำการทำฟีเจอร์นาฬิกานับถอยหลังกัน แบบที่ทุกคนสามารถทำตามได้ง่าย ๆ กัน

เขียนโดย
Chairawit Iamkhajornchai
Internship @ borntoDev

บทความนี้ตีพิมพ์ และ เผยแพร่เมื่อ 10 กรกฎาคม 2566

หากใครยังไม่พื้นฐาน React Native แนะนำลองตามบทความ Login ก่อนนะครับ สามารถอ่านได้ที่ https://www.borntodev.com/2023/07/08/การสร้างหน้า-login-ด้วย-react-native/

🔥 ถ้าเรียบร้อยแล้วก็ไปพร้อม ๆ กันเลยดีกว่าครับ!

1. ให้เพื่อน ๆ ที่สร้างโปรเจคเสร็จแล้วจากคำสั่ง npx expo init ไปแก้ไขโค้ดที่ส่วน App.js

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

const App = () => {
  return (
    <View style={{ flex: 1 }}>
      <Timer />
    </View>
  );
};

export default App;

โดยที่ให้เริ่มจากเรียกใช้ react , react-native และ Timer.js ที่เรากำลังจะสร้างขึ้นมาก่อน
จากนั้นประกาศ <View> และเรียกหน้าส่วน <Timer> เข้ามาเพื่อไว้ใช้แสดงผลตอนแอปเริ่มทำงาน

2. สร้าง folder “src” ขึ้นมาและ สร้างไฟล์ Timer.js

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

เรียกใช้ useState , useEffect และ View , StyleSheet , Text สำหรับการทำงานและแสดงผลของนาฬิกาเรากันนะครับ

const Timer = () => {
  const [time, setTime] = useState(25 * 60); // 25 minutes in seconds

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

    if (time > 0) {
      interval = setInterval(() => {
        setTime((prevTime) => prevTime - 1);
      }, 1000);
    }
		return () => {
      clearInterval(interval);
    };
  }, [time]);

ประกาศสร้าง Timer โดยตั้งเวลาเริ่มต้นที่ 25 นาทีด้วยการใช้ useState ในการทำงานร่วมกับ useEffect และตั้งเงื่อนไขว่าถ้าเวลามากกว่า 0 ให้หักลบไปที่ละ 1 และมี delay 1 วินาที

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

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

มีการประกาศ formatTime ให้เป็นวินาทีไปเป็นนาที โดยการใช้ Math.floor และแสดงผลลัพธ์ออกมา

return (
    <View style={styles.container}>
      <Text style={styles.timer}>{formatTime(time)}</Text>
    </View>
  );
};

แสดงผลนาฬิกานับถอยหลังบน Screen สำหรับทดสอบ

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  timer: {
    fontSize: 60,
    fontWeight: 'bold',
  },
});

export default Timer;

ตกแต่งด้วย Styles ให้กับการแสดงผลและส่วนของนาฬิกาโดยตั้งให้อยู่ตรงกลางหน้าจอพอดีเมื่อเสร็จสิ้นแล้วก็จะได้โค้ดทั้งหมดจะมีหน้าตาดังนี้

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

const Timer = () => {
  const [time, setTime] = useState(25 * 60); // 25 minutes in seconds

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

    if (time > 0) {
      interval = setInterval(() => {
        setTime((prevTime) => prevTime - 1);
      }, 1000);
    }

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

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

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

  return (
    
      {formatTime(time)}
    
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  timer: {
    fontSize: 60,
    fontWeight: 'bold',
  },
});

export default Timer;

เมื่อลองทดสอบด้วย Expo GO ดูสำหรับใครที่ใช้ Android นะครับ หรือใครที่ใช้ IOS ก็สามารถใช้กล้องสแกนทดสอบได้เลย จะได้หน้าตาประมาณนี้เลยนะ เมื่อเริ่มเปิดแอปก็จะนับถอยหลังทันทีเลย

โดยสำหรับใครที่อยากตกแต่งเพิ่มก็สามารถใส่ backgroundColor ใน container และ color ใน timer เพื่อตกแต่งนาฬิกานับถอยหลังของเราให้ดูสวยงามขึ้นได้นะครับ

เพียงเท่านี้เราก็จะได้แอปสำหรับจับเวลาถอยหลังกันแล้วเป็นยังไงกันบ้างครับเพียงแค่นี้เขียนโค้ดแค่นิดเดียวเองเราก็สามารถทำแอปนับเวลาถอยหลังได้แล้วในตอนต่อไปผมก็จะสอนวิธีการทำให้มันดูน่าใช้ขึ้นนะครับจะเป็นยังไงก็รอไปดูกันได้เลยนะครับ

สุดท้ายนี้ถ้าเพื่อน ๆ ชื่นชอบบทความนี้และคิดว่าเป็นประโยชน์ก็อย่าลืมกด ❤ ให้กันด้วยนะครับเพื่อที่จะได้ไม่พลาดความรู้ใหม่ ๆ ที่ส่งตรงถึงที่ให้กันไปแบบฟรี ๆ ไเลยและในตอนนี้ผมก็ต้องขอตัวลาไปก่อน…

ขอบคุณที่เข้ามาอ่านกันนะครับ🙏

ระบบฝึกทักษะ การเขียนโปรแกรม

ที่พร้อมตรวจผลงานคุณ 24 ชั่วโมง

  • โจทย์ปัญหากว่า 200 ข้อ ที่รอท้าทายคุณอยู่
  • รองรับ 9 ภาษาโปรแกรมหลัก ไม่ว่าจะ Java, Python, C ก็เขียนได้
  • ใช้งานได้ฟรี ! ครบ 20 ข้อขึ้นไป รับ Certificate ไปเลย !!
เข้าใช้งานระบบ DevLab ฟรี !เรียนรู้เพิ่มเติม

เรียนรู้ไอที “อัพสกิลเขียนโปรแกรม” จากตัวจริง
ปั้นให้คุณเป็น คนสายไอทีระดับมืออาชีพ

BorntoDev

Author BorntoDev

BorntoDev Co., Ltd.

More posts by BorntoDev
Close Menu

เราใช้คุกกี้เพื่อพัฒนาประสิทธิภาพ และประสบการณ์ที่ดีในการใช้เว็บไซต์ของคุณ คุณสามารถศึกษารายละเอียดได้ที่ นโยบายความเป็นส่วนตัว และสามารถจัดการความเป็นส่วนตัวเองได้ของคุณได้เองโดยคลิกที่ ตั้งค่า

ตั้งค่าความเป็นส่วนตัว

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

ยอมรับทั้งหมด
จัดการความเป็นส่วนตัว
  • คุกกี้ที่จำเป็น
    เปิดใช้งานตลอด

    ประเภทของคุกกี้มีความจำเป็นสำหรับการทำงานของเว็บไซต์ เพื่อให้คุณสามารถใช้ได้อย่างเป็นปกติ และเข้าชมเว็บไซต์ คุณไม่สามารถปิดการทำงานของคุกกี้นี้ในระบบเว็บไซต์ของเราได้
    รายละเอียดคุกกี้

  • คุกกี้สำหรับการติดตามทางการตลาด

    ประเภทของคุกกี้ที่มีความจำเป็นในการใช้งานเพื่อการวิเคราะห์ และ นำเสนอโปรโมชัน สินค้า รวมถึงหลักสูตรฟรี และ สิทธิพิเศษต่าง ๆ คุณสามารถเลือกปิดคุกกี้ประเภทนี้ได้โดยไม่ส่งผลต่อการทำงานหลัก เว้นแต่การนำเสนอโปรโมชันที่อาจไม่ตรงกับความต้องการ
    รายละเอียดคุกกี้

บันทึกการตั้งค่า