การจัดการ Touch Events ใน React Native

บนอุปกรณ์มือถือ การโต้ตอบกับ UI เกิดขึ้นผ่านการแตะ (tap) หรือสัมผัส (touch) เช่น กดปุ่ม, เลื่อนหน้าจอ, ซูม React Native มี event และคอมโพเนนต์ touchable สำหรับจัดการ gestures นี้

ตัวอย่างที่ 1: การจัดการ Tap บน Button

<Button
  onPress={() => {
    alert('You Tapped on Me!');
  }}
  title="Tap Me"
/>

Event onPress จะถูกเรียกเมื่อผู้ใช้แตะปุ่ม

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

const App = () => {
  return (
    
       {
          alert('You Tapped on Me!');
        }}
        title="Tap Me"
      />
    
  );
};

export default App;

ผลลัพธ์

Touchable Components

คอมโพเนนต์ Touchable ช่วยจับ gesture การแตะในกรณีที่ event เช่น onPress() มีปัญหาบนคอมโพเนนต์บางตัว มี 3 ตัวเลือก:

• TouchableOpacity - เปลี่ยนความโปร่งใสเมื่อสัมผัส
• TouchableHighlight - ทำให้สีเข้มขึ้นเมื่อกด
• TouchableWithoutFeedback - จัดการ touch โดยไม่ให้ feedback ใดๆ

TouchableOpacity

เปลี่ยน opacity ของ element เมื่อถูกสัมผัส

<TouchableOpacity onPress={() => alert('You Tapped Me')}>
  <Text style={styles.text}>Button</Text>
</TouchableOpacity>

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

const App = () => {
  return (
    
       alert('You Tapped Me')}>
        Button
      
    
  );
};

export default App;

const styles = StyleSheet.create({
  container: { alignItems: 'center' },
  text: {
    borderWidth: 1,
    padding: 25,
    borderColor: 'black',
    backgroundColor: 'red'
  }
});

จะเห็น opacity เปลี่ยนเมื่อแตะปุ่ม

TouchableHighlight

เมื่อกด element จะสีเข้มขึ้นและแสดงสีพื้นผ่าน

import { TouchableHighlight } from 'react-native'

<TouchableHighlight onPress={() => alert('You Tapped Me')} activeOpacity={0.6}>
  <Text style={styles.text}>Button</Text>
</TouchableHighlight>

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

const App = (props) => {
  return (
    
       alert('You Tapped Me')} activeOpacity={0.6}>
        Button
      
    
  );
};

export default App;

const styles = StyleSheet.create({
  container: { padding: 100, alignItems: 'center' },
  text: {
    borderWidth: 1,
    padding: 25,
    borderColor: 'black',
    backgroundColor: 'gray'
  }
});

ผลลัพธ์

TouchableWithoutFeedback

ใช้เมื่อต้องการจัดการ touch event แต่ไม่ต้องการ feedback ใดๆ

<TouchableWithoutFeedback onPress={() => alert('You Tapped Me')}>
  <Text style={styles.text}>Button</Text>
</TouchableWithoutFeedback>

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

const Home = (props) => {
  return (
    
       alert('You Tapped Me')}>
        Button
      
    
  );
};

export default Home;

const styles = StyleSheet.create({
  container: { padding: 100, alignItems: 'center' },
  text: {
    borderWidth: 1,
    padding: 25,
    borderColor: 'black',
    backgroundColor: 'gray'
  }
});

ผลลัพธ์

คำแนะนำเพิ่มเติม

• ในปัจจุบันแนะนำให้ใช้ Pressable API แทน ซึ่งเป็น API ใหม่ที่ครอบคลุมและยืดหยุ่นกว่า
• Pressable รองรับ onPress, onLongPress, onPressIn, onPressOut และสถานะ pressed สำหรับ styling