React native View 事件拦截与处理

桃扇骨 2022-12-13 01:48 386阅读 0赞

## ReactNative事件处理流程 ##

在事件处理中，每个事件只能由一个组件处理，如组件C处理了事件，那么AB就不会处理这个事件了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhYnVzaWRlZGU_size_16_color_FFFFFF_t_70_pic_center]

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

**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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhYnVzaWRlZGU_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/510adee6a5c948aca25acb79da71cff5.png