React native View 事件拦截与处理

ReactNative事件处理流程

在事件处理中，每个事件只能由一个组件处理，如组件C处理了事件，那么AB就不会处理这个事件了

示例：如果发送一个触摸或移动事件，执行流程如下

1.询问谁要处理这个事件

1)询问谁要拦截这个事件
调用A的onStartShouldSetResponderCapture，如果返回true，则由A处理这个事件，否则调用B的onStartShouldSetResponderCapture，然后C的…
如果没有组件拦截则进入下步

2）询问谁要处理这个事件
调用C的onStartShouldSetResponder，如果返回true，则由C处理这个事件，否则调用B的，然后A的

2.处理事件
如果由组件要处理这个事件，则如果处理流程
1.事件开始时，调用组件的onResponderStart函数
2.事件开始时，调用组件的onResponderGrant函数
3.事件移动时，调用组件的onResponderMove函数
4.手指松开时，调用组件的onResponderRelease函数
5…

简单示例代码

<View
    onStartShouldSetResponderCapture={()=>{
        return true;
    }}
    onResponderGrant={() => {
        this.setState({ backgroundColor: '#0002' });
    }}
    onResponderRelease={()=>{
        this.setState({ backgroundColor: '#0000' });
    }}
>
    <Button><Text>主题</Text></Button>
</View>