วิธีจัดการกับการสัมผัสใน ReactNative?

บนอุปกรณ์ การโต้ตอบกับ UI ส่วนใหญ่เกิดขึ้นผ่านการแตะหรือแตะ ดังนั้นเมื่อเราใช้แอปนี้ เรามักจะแตะปุ่มเพื่อดำเนินการบางอย่าง หรือเลื่อนหน้าโดยการสัมผัสหน้าจอ พยายามซูมหน้า ฯลฯ ในการจัดการท่าทางสัมผัสเหล่านี้ เช่น การแตะ การโต้ตอบแบบสัมผัสมีเหตุการณ์ที่แคปจับหรือ องค์ประกอบที่สัมผัสได้เพื่อจัดการกับการสัมผัส

เรามาดูตัวอย่างสิ่งที่เกิดขึ้นเมื่อมีการคลิกปุ่ม

ตัวอย่างที่ 1:การจัดการการแตะที่ปุ่ม

นี่คือตัวอย่างง่ายๆ ของปุ่ม

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

เหตุการณ์ onPress จะถูกเรียกเมื่อผู้ใช้แตะที่ปุ่ม นี่คือตัวอย่างการใช้งาน

import React from 'react';
import { Button, View, Alert } from 'react-native';
const App = () => {
   return (
      <View style={{flex :1, justifyContent: 'center', margin: 15 }}>
         <Button
            onPress={() => {
               alert('You Tapped on Me!');
            }}
            title="Tap Me"
         />
      </View>
   );
}
export default App;

ผลลัพธ์

ส่วนประกอบที่สัมผัสได้

React native touchable component ช่วยในการจับท่าทางการแตะในกรณีที่มีปัญหาใด ๆ กับเหตุการณ์เช่น onPress() ซึ่งใช้กับส่วนประกอบดั้งเดิมที่ตอบสนองเช่นปุ่ม

ส่วนประกอบที่สัมผัสได้นั้นมาพร้อมกับตัวเลือกต่อไปนี้เพื่อจัดการกับท่าทางการแตะบนส่วนประกอบดั้งเดิมที่ตอบสนอง

• ความทึบที่สัมผัสได้
• ไฮไลท์ที่สัมผัสได้
• สัมผัสได้โดยไม่มีคำติชม

ความทึบที่สัมผัสได้

องค์ประกอบนี้จะเปลี่ยนความทึบขององค์ประกอบเมื่อสัมผัส

คุณสามารถใช้ TouchableOpacity ได้ดังนี้ -

<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 (
      <View style = {styles.container}>
         <TouchableOpacity onPress={() => alert('You Tapped Me')}>
            <Text style = {styles.text}>
               Button
            </Text>
         </TouchableOpacity>
      </View>
   )
}
export default App
const styles = StyleSheet.create ({
   container: {
      alignItems: 'center',
   },
   text: {
      borderWidth: 1,
      padding: 25,
      borderColor: 'black',
      backgroundColor: 'red'
   }
});

คุณจะเห็นความทึบเมื่อผู้ใช้แตะปุ่ม -

ไฮไลท์ที่สัมผัสได้

เมื่อผู้ใช้กดองค์ประกอบ องค์ประกอบจะเข้มขึ้นและสีพื้นฐานจะแสดงผ่าน

คุณต้องนำเข้า TouchableHighlight ก่อนใช้งานดังที่แสดงด้านล่าง -

import { TouchableHighlight } from 'react-native'

ส่วนประกอบปุ่มถูกรวมไว้ในองค์ประกอบข้อความ และข้อความอยู่ภายในองค์ประกอบ TouchableHighlight คุณสามารถเพิ่มสไตล์ให้กับส่วนประกอบได้ตามความต้องการของคุณ เพิ่มฟังก์ชั่น onPress บน TouchableHighlight และเมื่อแตะข้อความแจ้งเตือนจะปรากฏขึ้น

<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 (
      <View style = {styles.container}>
         <TouchableHighlight onPress={() => alert('You Tapped Me')} activeOpacity={0.6}>
            <Text style = {styles.text}>
               Button
            </Text>
         </TouchableHighlight>
      </View>
   )
}
export default App
const styles = StyleSheet.create ({
   container: {
      padding:100,
      alignItems: 'center',
   },
   text: {
      borderWidth: 1,
      padding: 25,
      borderColor: 'black',
      backgroundColor: 'gray'
   }
})

ผลลัพธ์

สัมผัสได้โดยไม่มีคำติชม

ควรใช้เมื่อคุณต้องการจัดการกับเหตุการณ์การสัมผัสและไม่ต้องการความคิดเห็นใดๆ

ที่นี่ปุ่มถูกห่อภายในองค์ประกอบ TouchableWithoutFeedback ดังที่แสดงด้านล่าง -

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

ตัวอย่าง:การทำงานกับองค์ประกอบ TouchableWithoutFeedback

import React from 'react'
import { View, TouchableWithoutFeedback, Text, StyleSheet } from 'react-native'
const Home = (props) => {
   return (
      <View style = {styles.container}>
         <TouchableWithoutFeedback onPress={() => alert('You Tapped Me')}>
            <Text style = {styles.text}>
               Button
            </Text>
         </TouchableWithoutFeedback>
      </View>
   )
}
export default Home
const styles = StyleSheet.create ({
   container: {
      padding:100,
      alignItems: 'center',
   },
   text: {
      borderWidth: 1,
      padding: 25,
      borderColor: 'black',
      backgroundColor: 'gray'
   }
})

ผลลัพธ์