Button และ TouchableOpacity: สร้างปุ่มกด

Button และ TouchableOpacity: สร้างปุ่มกด

สวัสดีครับ! จากบทที่แล้วที่เราได้เรียนรู้การใช้งาน TextInput เพื่อรับข้อมูลจากผู้ใช้ วันนี้เราจะมาต่อยอดความรู้ด้วยการสร้างปุ่มกดที่สามารถตอบสนองต่อการสัมผัสของผู้ใช้ ซึ่งเป็นองค์ประกอบสำคัญในการสร้างปฏิสัมพันธ์กับแอปของเรา โดยเราจะมาเจาะลึกกันที่ Button และ TouchableOpacity สอง Component หลักที่ใช้ในการสร้างปุ่มใน React Native ครับ

ความแตกต่างระหว่าง Button และ TouchableOpacity

ทั้ง Button และ TouchableOpacity ต่างก็ใช้สร้างปุ่มกดได้ แต่มีข้อแตกต่างที่สำคัญซึ่งส่งผลต่อการใช้งานในสถานการณ์ต่างๆ ดังนี้:

• Button: เป็น Component ที่มาพร้อมกับสไตล์พื้นฐานที่ Platform กำหนด (Android หรือ iOS) ทำให้ง่ายต่อการใช้งานและได้ปุ่มที่มีรูปลักษณ์เป็นไปตามมาตรฐานของแต่ละ Platform เหมาะสำหรับปุ่มที่ไม่ต้องการการปรับแต่งสไตล์มากนัก
• TouchableOpacity: เป็น Component ที่มีความยืดหยุ่นสูงกว่า สามารถปรับแต่งสไตล์ได้ละเอียดกว่า และให้เอฟเฟ็กต์เมื่อกด (opacity จะลดลงเล็กน้อย) เหมาะสำหรับปุ่มที่ต้องการความสวยงามเฉพาะตัว หรือต้องการควบคุมลักษณะการตอบสนองต่อการสัมผัสอย่างละเอียด

สรุปง่ายๆ คือ ถ้าต้องการความรวดเร็วและได้ปุ่มตามมาตรฐานของ Platform ให้ใช้ Button แต่ถ้าต้องการความยืดหยุ่นและปรับแต่งสไตล์ได้เต็มที่ ให้ใช้ TouchableOpacity

การใช้งาน Button

Button เป็น Component ที่ใช้งานง่ายมาก เพียงแค่ import เข้ามาและกำหนด title (ข้อความที่จะแสดงบนปุ่ม) และ onPress (ฟังก์ชันที่จะทำงานเมื่อปุ่มถูกกด)

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

const App = () => {
  const handlePress = () => {
    Alert.alert('ปุ่มถูกกด!');
  };

  return (
    <View style={styles.container}>
      <Button
        title="กดฉันสิ!"
        onPress={handlePress}
      />
    </View>
  );
};

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

export default App;

คำอธิบาย:

• เรา import Button, View, StyleSheet และ Alert จาก react-native
• handlePress เป็นฟังก์ชันที่จะถูกเรียกเมื่อปุ่มถูกกด ในตัวอย่างนี้ เราใช้ Alert.alert เพื่อแสดงข้อความแจ้งเตือน
• เราสร้าง Button Component โดยกำหนด title เป็น "กดฉันสิ!" และ onPress เป็น handlePress

ข้อควรระวัง:

• Button ไม่สามารถปรับแต่งสไตล์ได้มากนัก เช่น สีพื้นหลัง หรือขนาดตัวอักษร หากต้องการปรับแต่งสไตล์อย่างละเอียด ควรใช้ TouchableOpacity
• Button บน Android จะแสดงเป็นปุ่มยกขึ้น (elevated button) ส่วนบน iOS จะแสดงเป็นปุ่มเรียบๆ (flat button)

การใช้งาน TouchableOpacity

TouchableOpacity ให้ความยืดหยุ่นในการปรับแต่งสไตล์มากกว่า Button เราสามารถใส่ Component อะไรก็ได้เข้าไปข้างใน TouchableOpacity และกำหนดสไตล์ให้กับ Component เหล่านั้นได้

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

const App = () => {
  const handlePress = () => {
    console.log('ปุ่ม TouchableOpacity ถูกกด!');
  };

  return (
    <View style={styles.container}>
      <TouchableOpacity
        style={styles.button}
        onPress={handlePress}
      >
        <Text style={styles.buttonText}>กดฉันสิ!</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  button: {
    backgroundColor: '#2196F3',
    paddingVertical: 12,
    paddingHorizontal: 24,
    borderRadius: 5,
    elevation: 3, // ทำให้ปุ่มดูมีมิติบน Android
  },
  buttonText: {
    fontSize: 16,
    color: 'white',
    fontWeight: 'bold',
    alignSelf: 'center',
  },
});

export default App;

คำอธิบาย:

• เรา import TouchableOpacity, View, Text และ StyleSheet จาก react-native
• เราสร้าง TouchableOpacity Component โดยกำหนด style เป็น styles.button และ onPress เป็น handlePress
• ภายใน TouchableOpacity เราใส่ Text Component เพื่อแสดงข้อความบนปุ่ม และกำหนด style เป็น styles.buttonText
• ใน StyleSheet เรากำหนดสไตล์ให้กับ button และ buttonText เช่น สีพื้นหลัง, padding, borderRadius และ elevation

ข้อดีของ TouchableOpacity:

• สามารถปรับแต่งสไตล์ได้ละเอียด
• สามารถใส่ Component อะไรก็ได้เข้าไปข้างใน
• มีเอฟเฟ็กต์เมื่อกด (opacity จะลดลงเล็กน้อย) ซึ่งช่วยให้ผู้ใช้ทราบว่าปุ่มถูกกดแล้ว

การกำหนด Action เมื่อกดปุ่ม

การกำหนด Action เมื่อกดปุ่มทำได้โดยการส่งฟังก์ชันไปยัง prop onPress ของ Button หรือ TouchableOpacity ฟังก์ชันนี้จะถูกเรียกเมื่อผู้ใช้กดปุ่ม

ตัวอย่างเช่น เราสามารถใช้ onPress เพื่อเปลี่ยนค่า state ของ Component:

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

const App = () => {
  const [count, setCount] = useState(0);

  const handlePress = () => {
    setCount(count + 1);
  };

  return (
    <View style={styles.container}>
      <Text>จำนวนครั้งที่กด: {count}</Text>
      <TouchableOpacity
        style={styles.button}
        onPress={handlePress}
      >
        <Text style={styles.buttonText}>กดเพิ่ม!</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  button: {
    backgroundColor: '#4CAF50',
    paddingVertical: 12,
    paddingHorizontal: 24,
    borderRadius: 5,
  },
  buttonText: {
    fontSize: 16,
    color: 'white',
    fontWeight: 'bold',
    alignSelf: 'center',
  },
});

export default App;

ในตัวอย่างนี้ เราใช้ useState hook เพื่อสร้าง state ชื่อ count และฟังก์ชัน setCount ที่ใช้สำหรับอัปเดตค่า count เมื่อปุ่มถูกกด ฟังก์ชัน handlePress จะเรียก setCount(count + 1) เพื่อเพิ่มค่า count ขึ้นทีละ 1

การปรับแต่ง Style ของปุ่ม

เราสามารถปรับแต่ง Style ของปุ่มได้โดยการกำหนด Style ให้กับ Component ที่อยู่ภายใน TouchableOpacity หรือโดยการกำหนด Style ให้กับ Button (แต่มีข้อจำกัดมากกว่า)

ตัวอย่างการปรับแต่ง Style ของ TouchableOpacity:

// (โค้ดเหมือนตัวอย่างก่อนหน้า แต่เปลี่ยน Style ของ button)
const styles = StyleSheet.create({
  // ... (ส่วนอื่นๆ เหมือนเดิม)
  button: {
    backgroundColor: '#FF9800', // เปลี่ยนเป็นสีส้ม
    paddingVertical: 10, // ลด padding เล็กน้อย
    paddingHorizontal: 20,
    borderRadius: 10, // เพิ่มความโค้งมน
    borderWidth: 2, // เพิ่มเส้นขอบ
    borderColor: '#E65100', // สีของเส้นขอบ
  },
  buttonText: {
    fontSize: 18, // เพิ่มขนาดตัวอักษร
    color: '#333', // เปลี่ยนสีตัวอักษร
    fontWeight: 'normal', // เปลี่ยนความหนาของตัวอักษร
  },
});

ข้อผิดพลาดที่พบบ่อย:

• ลืม import Component: อย่าลืม import Button หรือ TouchableOpacity จาก react-native
• ไม่ได้กำหนด onPress: หากไม่ได้กำหนด onPress ปุ่มจะไม่ทำงาน
• Style ไม่แสดงผล: ตรวจสอบให้แน่ใจว่า Style ที่กำหนดถูกต้อง และ Component ที่ต้องการปรับแต่ง Style อยู่ภายใน TouchableOpacity
• Performance: หากมีการปรับแต่ง Style ที่ซับซ้อนมาก อาจส่งผลต่อ Performance ของแอป ควรใช้ Style ที่เรียบง่ายและหลีกเลี่ยงการคำนวณ Style ที่ซับซ้อนในทุกๆ ครั้งที่ render

สรุป

ในบทนี้ เราได้เรียนรู้การสร้างปุ่มกดใน React Native โดยใช้ Button และ TouchableOpacity เราได้เรียนรู้ถึงความแตกต่างระหว่างสอง Component นี้ การกำหนด Action เมื่อกดปุ่ม และการปรับแต่ง Style ของปุ่ม หวังว่าบทนี้จะเป็นประโยชน์ในการสร้างแอปพลิเคชันที่น่าสนใจและใช้งานง่ายนะครับ

ในบทต่อไป เราจะมาเรียนรู้เกี่ยวกับการแสดงรายการข้อมูลด้วย FlatList ซึ่งเป็น Component ที่ใช้ในการแสดงรายการข้อมูลจำนวนมากได้อย่างมีประสิทธิภาพ เตรียมตัวพบกับความสนุกในการสร้าง List View กันได้เลย!