React Native : View onPress가 작동하지 않습니다.


104

나는 이상한 문제에 직면 해있다. 내 네이티브 응용 프로그램을 반응에서 내가 설정 한 경우, onPress이벤트를 View이 트리거되지 않습니다하지만 난에 동일하게 설정하면 Text내부 View, 그것은 발생합니다. 내가 여기서 무엇을 놓치고 있습니까?

<View style={{backgroundColor: "red", padding: 20}}>
  <Text onPress={()=> {
    console.log('works');
    }
  }>X</Text>
</View>


<View style={{backgroundColor: "red", padding: 20}} onPress={()=> {
    console.log('does not work');
    }
  }>
  <Text>X</Text>
</View>

왜 그렇습니까? React Native의 문제입니까? 버전 0.43을 사용하고 있습니다.

답변:


176

당신은 사용할 수 있습니다 TouchableOpacity위한 onPress이벤트입니다. 소품을 View제공하지 않습니다 onPress.

<TouchableOpacity style={{backgroundColor: "red", padding: 20}} onPress={()=> {
    console.log('does not work');
    }
  }>
  <Text>X</Text>
</TouchableOpacity>

4
완전한 참조 문서는 여기에 있습니다 : facebook.github.io/react-native/docs/touchableopacity.html
Muhammad Hannan

onPress는 비동기 함수를 콜백으로 사용할 수 있습니까? 나는 공식 문서에서 이것에 대한 언급을 보지 못합니다.
ryanwebjackson

27

당신은으로보기를 래핑 할 수 TouchableWithoutFeedback후 사용 onPress과 친구들은 평소 좋아합니다. 또한 pointerEvents자식 뷰에서 속성을 설정하여 차단할 수 있습니다 . 부모의 포인터 이벤트도 차단 TouchableWithoutFeedback합니다. 흥미 롭습니다. 이것은 Android에서 필요했습니다. iOS에서는 테스트하지 않았습니다.

https://facebook.github.io/react-native/docs/touchablewithoutfeedback.html

<TouchableWithoutFeedback onPressIn={this.closeDrawer}>
    <Animated.View style={[styles.drawerBackground, styleBackground]} pointerEvents={isOpen ? undefined : 'none'} />
</TouchableWithoutFeedback>

2
iOS에서 테스트되었으며 잘 작동합니다. 피드백없이 터치 할 수 있고 하이라이트를 터치 할 수 있습니다
habed

@habed를 공유해 주셔서 감사합니다! DID가 pointerEventsNone포장 부모의 자식 블록 프레스에?
Noitidart

6

이를 위해 TouchableOpacity, TouchableHighlight, TouchableNativeFeedback을 사용할 수 있습니다. 보기 구성 요소는 onPress를 소품으로 제공하지 않습니다. 그래서 당신은 이것 대신에 이것을 사용합니다.

<TouchableNativeFeedback
        onPress={this._onPressButton}
</TouchableNativeFeedback>

OR

<TouchableHighlight onPress={this._onPressButton}>
</TouchableHighlight>

OR

<TouchableOpacity onPress={this._onPressButton}>
</TouchableOpacity>


2

또는 다음과 같이 뷰에 onStartShouldSetResponder를 제공 할 수도 있습니다.

<View onStartShouldSetResponder={() => console.log("View click")}>
  // some code here
</View>
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.