问题描述：在做React Native项目时，想要Button的点击事件和父元素的事件同时存在

由于React Native自带阻止事件冒泡行为，在我各种百度寻求解决办法无果即将放弃时，我在官网api中寻求到了解决办法

PanResponder

PanResponder reconciles several touches into a single gesture. It makes single-touch gestures resilient to extra touches, and can be used to recognize basic multi-touch gestures.

就是这么一段话，再加上下面的例子，让我茅塞顿开！

官网地址：https://reactnative.dev/docs/panresponder#methods

我的解决办法：

import React from 'react';
import {
  View,
  Text,
  Dimensions,
  PanResponder
} from 'react-native';
const { width, height } = Dimensions.get('window');
export default class Demo extends React.Component {
  parent = PanResponder.create({
    onStartShouldSetPanResponderCapture: () => {
      // 你需要父元素处理的事件
      console.log("我是父元素")
    },
  })
  child = PanResponder.create({
    onStartShouldSetPanResponderCapture: () => {
      // 你需要子元素处理的事件
      console.log("我是子元素")
    },
  })
  render () {
    return (
      <View {...this.parent.panHandlers} style={{ width, height }}>
        <View {...this.child.panHandlers}>
          <Text>Hello World!</Text>
        </View>
      </View>
    )
  }
}

当然官方还提供了更为具体的方法，可以根据需求的不同使用其他方法

onMoveShouldSetPanResponder: (e, gestureState) => {...}
onMoveShouldSetPanResponderCapture: (e, gestureState) => {...}
onStartShouldSetPanResponder: (e, gestureState) => {...}
onStartShouldSetPanResponderCapture: (e, gestureState) => {...}
onPanResponderReject: (e, gestureState) => {...}
onPanResponderGrant: (e, gestureState) => {...}
onPanResponderStart: (e, gestureState) => {...}
onPanResponderEnd: (e, gestureState) => {...}
onPanResponderRelease: (e, gestureState) => {...}
onPanResponderMove: (e, gestureState) => {...}
onPanResponderTerminate: (e, gestureState) => {...}
onPanResponderTerminationRequest: (e, gestureState) => {...}
onShouldBlockNativeResponder: (e, gestureState) => {...}

最后

以上就是酷炫过客为你收集整理的React Native 子元素与父元素事件冲突问题描述：在做React Native项目时，想要Button的点击事件和父元素的事件同时存在PanResponder的全部内容，希望文章能够帮你解决React Native 子元素与父元素事件冲突问题描述：在做React Native项目时，想要Button的点击事件和父元素的事件同时存在PanResponder所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。