Javascript 与元素一起使用的React本机PanResponder具有borderRadius

Javascript 与元素一起使用的React本机PanResponder具有borderRadius,javascript,react-native,gesture,touches,Javascript,React Native,Gesture,Touches,我将PanResponder绑定到具有borderRadius样式的元素。然后,当我点击某个地方,不是在圆上,而是在原始区域,它也触发了事件 (正如下图所示,单击红色圆圈外的黑色矩形区域时,也会触发绑定到红色圆圈的事件) 如果有人知道如何预防 class touch extends Component { constructor(props, context) { super(props, context); this.state = { bg: 'red

我将PanResponder绑定到具有borderRadius样式的元素。然后,当我点击某个地方,不是在圆上,而是在原始区域,它也触发了事件

(正如下图所示,单击红色圆圈外的黑色矩形区域时,也会触发绑定到红色圆圈的事件)

如果有人知道如何预防

class touch extends Component {
    constructor(props, context) {
    super(props, context);
    this.state = {
        bg: 'red'
    }
   }
componentWillMount(){
    this.gestureHandlers = PanResponder.create({
    onStartShouldSetPanResponder:    this._handleStartShouldSetPanResponder.bind(this),
    onMoveShouldSetPanResponder: this._handleMoveShouldSetPanResponder.bind(this),
    onPanResponderGrant: this._handlePanResponderGrant.bind(this),
    onPanResponderMove: this._handlePanResponderMove.bind(this),
    onPanResponderRelease: this._handlePanResponderEnd.bind(this),
    onPanResponderTerminate: this._handlePanResponderEnd.bind(this),
})
}

_handleStartShouldSetPanResponder(e, gestureState){
 return true;
}

_handleMoveShouldSetPanResponder(e, gestureState){
 return true;
}

_handlePanResponderGrant(e, gestureState){
 this.setState({bg: 'orange'});
}

_handlePanResponderEnd(e, gestureState){
 this.setState({bg: 'red'});
}
render() {

return (
 <View style={styles.container}>
 <View style={styles.test}>
   <View 
    {...this.gestureHandlers.panHandlers}
    style={[styles.rectBig, {
      "backgroundColor": this.state.bg
    }]}>
    </View>
    </View> 
</View>
 );}}
类触摸扩展组件{
构造函数(道具、上下文){
超级(道具、背景);
此.state={
背景:“红色”
}
}
组件willmount(){
this.gestureholders=PanResponder.create({
onStartShouldSetPanResponder:this.\u handleStartShouldSetPanResponder.bind(this),
onMoveShouldSetPanResponder:this.\u handleMoveShouldSetPanResponder.bind(this),
onPanResponderGrant:this.\u handlePanResponderGrant.bind(this),
onPanResponderMove:this.\u handlePanResponderMove.bind(this),
onPanResponderRelease:this.\u handlePanResponderRend.bind(this),
onPanResponderTerminate:this.\u handlePanResponderRend.bind(this),
})
}
_handleStartShouldSetPanResponder(e,手势状态){
返回true;
}
_handleMoveShouldSetPanResponder(e,手势状态){
返回true;
}
_handlePanResponderGrant(e,手势状态){
this.setState({bg:'orange'});
}
_handlePanResponderEnd(e,手势状态){
this.setState({bg:'red'});
}
render(){
返回(
);}}