Làm thế nào để xử lý các lần chạm trong ReactNative?

Trên thiết bị, tương tác với giao diện người dùng chủ yếu diễn ra thông qua một lần chạm hoặc chạm. Vì vậy, khi chúng tôi sử dụng ứng dụng, chúng tôi chủ yếu nhấn vào nút để thực hiện một số hành động hoặc cuộn trang bằng cách chạm vào màn hình, cố gắng thu phóng trang, v.v. thành phần có thể chạm để xử lý khi chạm vào nó.

Hãy để chúng tôi xem ví dụ về những gì sẽ xảy ra khi một nút được nhấp vào.

Ví dụ 1:Xử lý nút Nhấn vào

Đây là một ví dụ đơn giản về Button.

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

Sự kiện onPress sẽ được gọi khi người dùng chạm vào nút. Đây là một ví dụ hoạt động của nó.

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;

Đầu ra

Thành phần có thể cảm ứng

Thành phần có thể chạm vào React gốc giúp nắm bắt cử chỉ chạm trong trường hợp có bất kỳ sự cố nào với các sự kiện như onPress () được sử dụng trên các thành phần gốc phản ứng như nút.

Thành phần có thể chạm đi kèm với các tùy chọn sau để xử lý các cử chỉ chạm trên bất kỳ thành phần gốc phản ứng nào

• Độ mờ cảm ứng được
• Đánh dấu có thể chạm được
• Có thể chạm vào mà không cần phản hồi

Độ mờ có thể chạm được

Phần tử này sẽ thay đổi độ mờ của một phần tử khi được chạm vào.

Bạn có thể sử dụng TouchableOpacity như sau -

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

Đây là một ví dụ hoạt động -

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'
   }
});

Bạn sẽ thấy độ mờ khi người dùng chạm vào nút -

Điểm nổi bật có thể chạm

Khi người dùng nhấn vào phần tử, phần tử sẽ tối hơn và màu bên dưới sẽ hiển thị xuyên suốt.

Bạn phải nhập TouchableHighlight trước khi sử dụng nó như hình dưới đây -

import { TouchableHighlight } from 'react-native'

Thành phần Nút được bao bọc bên trong thành phần Văn bản và Văn bản nằm bên trong thành phần TouchableHighlight. Bạn có thể thêm kiểu cho các thành phần theo yêu cầu của bạn. Chức năng onPress được thêm vào TouchableHighlight và khi chạm vào, thông báo cảnh báo sẽ được hiển thị.

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

Ví dụ hoạt động đầy đủ như sau -

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'
   }
})

Đầu ra

Có thể chạm mà không cần phản hồi

Điều này sẽ được sử dụng khi bạn muốn xử lý sự kiện chạm và không cần bất kỳ phản hồi nào.

Ở đây, Nút được bao bọc bên trong thành phần TouchableWithoutFeedback như được hiển thị bên dưới -

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

Ví dụ:Làm việc với thành phần 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'
   }
})

Đầu ra