ReactNative에서 터치를 처리하는 방법은 무엇입니까?

장치에서 UI와의 상호 작용은 주로 터치 또는 탭을 통해 발생합니다. 따라서 앱을 사용할 때 우리는 대부분 버튼을 탭하여 작업을 수행하거나 화면을 터치하여 페이지를 스크롤하고 페이지를 확대/축소하려고 시도합니다. 탭과 같은 이러한 제스처를 처리하기 위해 터치 반응형에는 캡처를 캡처하는 이벤트가 있습니다. 터치할 수 있는 구성 요소를 터치합니다.

버튼을 클릭했을 때 일어나는 일의 예를 살펴보겠습니다.

예시 1:버튼 탭 처리

다음은 Button의 간단한 예입니다.

 { alert('나를 도청했습니다!'); }} title="Tap Me"/>

onPress 이벤트는 사용자가 버튼을 탭할 때 호출됩니다. 다음은 이에 대한 실제 예입니다.

'react'에서 React 가져오기; 'react-native'에서 { Button, View, Alert } 가져오기; const App =() => { return (   { alert('You Taped on Me!'); }} title="Tap Me" />  );}기본 앱 내보내기; 
출력
 

 
 
터치 가능한 구성 요소
 

 React 네이티브 터치 가능 구성 요소는 버튼과 같은 반응 네이티브 구성 요소에 사용되는 onPress()와 같은 이벤트에 문제가 있는 경우 탭 제스처를 캡처하는 데 도움이 됩니다.
 

 터치 가능한 구성 요소에는 반응하는 기본 구성 요소에서 탭 제스처를 처리하기 위해 다음과 같은 옵션이 있습니다.
 
 
터치 가능한 불투명도
 
터치 가능한 하이라이트
 
피드백 없이 터치 가능
 
 
터치 가능한 불투명도
 

 이 요소는 터치 시 요소의 불투명도를 변경합니다.
 

 다음과 같이 TouchableOpacity를 사용할 수 있습니다 -
 
 alert('당신이 나를 두드렸다')}> <텍스트 스타일 ={styles.text}> 버튼 
 

 다음은 작업 예입니다 -
 
'react'import에서 React 가져오기 { TouchableOpacity, StyleSheet, View, Text } from 'react-native' const App =() => { return (   alert('You Tapped Me')}>  버튼    )}기본 Appconst 스타일 내보내기 =StyleSheet.create({ 컨테이너 :{ alignItems:'center', }, 텍스트:{ borderWidth:1, 패딩:25, borderColor:'검정', backgroundColor:'빨간색' }});
 

 사용자가 버튼을 터치하면 불투명도가 표시됩니다 -
 

 
 
터치 가능한 하이라이트
 

 사용자가 요소를 누르면 어두워지고 기본 색상이 표시됩니다.
 

 아래와 같이 TouchableHighlight를 사용하기 전에 가져와야 합니다. -
 
'react-native'에서 { TouchableHighlight } 가져오기
 

 Button 구성 요소는 Text 구성 요소 안에 래핑되어 있고 Text는 TouchableHighlight 구성 요소 안에 있습니다. 요구 사항에 따라 구성 요소에 스타일을 추가할 수 있습니다. TouchableHighlight에 onPress 기능이 추가되고 탭하면 알림 메시지가 표시됩니다.
 
 alert('나를 두드렸다')} activeOpacity={0.6}> <텍스트 스타일 ={styles.text}> 버튼 
 

 전체 작업 예는 다음과 같습니다 -
 
'react'import에서 React 가져오기 { View, TouchableHighlight, Text, StyleSheet } from 'react-native' const App =(props) => { return (   alert('You Tapped Me')} activeOpacity={0.6}>  버튼    )}기본 Appconst 스타일 내보내기 =StyleSheet.create({ container:{ padding:100, alignItems:'center', }, text:{ borderWidth:1, padding:25, borderColor:'black', backgroundColor:'gray' }})
 
출력
 

 
 
피드백 없이 터치 가능
 

 터치 이벤트를 처리하고 피드백이 필요하지 않을 때 사용해야 합니다.
 

 여기에서 Button은 아래와 같이 TouchableWithoutFeedback 구성 요소 내부에 래핑됩니다. -
 
 alert('당신이 나를 두드렸다')}> <텍스트 스타일 ={styles.text}> 버튼 
 
예:TouchableWithoutFeedback 구성요소 작업
 
'react'import에서 React 가져오기 { View, TouchableWithoutFeedback, Text, StyleSheet } from 'react-native' const Home =(props) => { return (   alert('You Tapped Me')}>  Button    )}기본 Homeconst 스타일 내보내기 =StyleSheet.create({ 컨테이너:{ 패딩:100, alignItems:'center', }, 텍스트:{ borderWidth:1, 패딩:25, borderColor:'검정', backgroundColor:'회색' }})
 
출력