Native View onPress 반응

Shiv Yadav 2024년2월15일
Native View onPress 반응

이 튜토리얼은 React Native 보기에서 onPress를 구성하는 방법을 알려줍니다.

Native View onPress 반응

React Native 구성 요소를 다룰 때 수많은 시나리오에서 onPress를 설정해야 하지만 React Native Touchables로 둘러싸야 합니다.

View 컨테이너 자체에 onPress를 설정할 수 있다면 어떨까요? React Native 버전 55.3에서만 작동하는 onStartShouldSetResponder로 가능합니다. 다음 코드 펜스와 함께 배워봅시다.

예제 코드:

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

const App = () => {
  return (
    <SafeAreaView style={{
    flex: 1 }}>
      <View style={styles.container}>
        <View
          style={styles.innerView}
          onStartShouldSetResponder={() => alert('You have clicked on view')}
        >
          <Text style={styles.paragraph}>Click on a View</Text>
        </View>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: 25,
    backgroundColor: '#72d4ed',
    padding: 8,
  },
  innerView: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: 25,
    backgroundColor: '#f77979',
    marginTop: 200,
    marginBottom: 200,
    marginLeft: 20,
    marginRight: 20,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    color: 'white',
    fontWeight: 'bold',
    textAlign: 'center',
  },
});
export default App;

버튼은 모든 프로그래밍 언어에서 사용되어 사용자 클릭 이벤트를 캡처합니다. 그러나 반응 네이티브에서는 onStartShouldSetResponder Prop을 사용하여 View 구성 요소에서 click onPress 이벤트를 활성화할 수 있습니다.

사용자가 View를 클릭할 때 View 구성 요소가 때때로 반응하도록 만들거나 이벤트를 발생시켜야 하기 때문입니다. 따라서 onStartShouldSetResponder 속성이 있습니다. 버튼 onPress 이벤트와 유사하게 작동하며 함수 호출을 처리할 수 있습니다.

onStartShouldSetRespondertrue로 설정하면 이 View가 화면의 이 부분에서 발생하는 모든 모션 이벤트를 가져와야 한다고 제스처 응답기에 알립니다.

부모의 자식인 커서 보기 위로 손을 움직여도 아무런 영향이 없어야 합니다. 부모만 터치 응답자가 되도록 요청했기 때문입니다. 기억하세요, 우리는 그것을 요청해야 합니다; 그렇지 않으면 기본적으로 대화형이 아닙니다.

출력:

코드를 실행하면 다음과 같이 표시됩니다.

기본 보기 onpress 반응 - onpress

보시다시피 보기 클릭이라는 버튼이 있습니다. 그것을 클릭하면 onpress 메서드가 트리거되어 You have clicked on view라는 팝업이 표시됩니다.

네이티브 뷰 onpress 반응 - 온프레스 팝업

작가: Shiv Yadav
Shiv Yadav avatar Shiv Yadav avatar

Shiv is a self-driven and passionate Machine learning Learner who is innovative in application design, development, testing, and deployment and provides program requirements into sustainable advanced technical solutions through JavaScript, Python, and other programs for continuous improvement of AI technologies.

LinkedIn

관련 문장 - React Native