[react-native] React Native : View onPress가 작동하지 않습니다.

Program / 글쓴이

나는 이상한 문제에 직면 해있다. 내 네이티브 응용 프로그램을 반응에서 내가 설정 한 경우, 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을 사용하고 있습니다.

답변

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

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

답변

당신은으로보기를 래핑 할 수 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>

답변

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

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

OR

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

OR

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

스 니펫 확장

답변

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

<View onStartShouldSetResponder={() => console.log("View click")}>
  // some code here
</View>

답변