reactjs 如何在React Native中的嵌套Touchable中传播触摸事件?

cnwbcb6i  于 2022-11-29  发布在  React
关注(0)|答案(3)|浏览(250)

在我的应用程序中,我有一个嵌套的可触摸元素。每次我按下其中一个,我只得到一个事件。我可以向下传播内层吗?提前感谢!
代码如下:

<TouchableHighlight style={{ flex: 1 }} onPress={() => { console.log('outer press') }}>
        <TouchableHighlight style={{ flex: 0.8, backgroundColor: 'blue' }} onPress={() => { console.log('inner press') }}>
            <Text>1</Text>
        </TouchableHighlight>
    </TouchableHighlight>
weylhg0b

weylhg0b1#

一个Touchables包含一个本地状态,该状态是它的本机状态,而其他Touchables不知道它。
因此,当您触及嵌套的Touchable时,事件将传播到访问状态的子元素,并且不会释放资源,除非它已完成
下面是嵌套buttons的生命周期,如docs中所述

Parent: Parent Touchable
Child: Child Touchable

Parent onStartShouldSetResponder > Parent onResponderGrant > Parent onResponderTerminationRequest > Parent onResponderTerminate > Child onStartShouldSetResponder > Child onResponderGrant > Child onResponderRelease
  • 由于onResponderReject,父级将无法获得访问权限 *

如果父View想要阻止子成为触摸启动的响应者,它应该具有返回trueonStartShouldSetResponderCapture处理程序。
你可以看看这个video

pxq42qpu

pxq42qpu2#

我已经通过避免两个嵌套的Touchable* 组件解决了这个问题。使用onStartShouldSetResponderCapturepointerEvents并没有成功实现我的目标。
相反,我最终使用了一个视图及其onTouchStart事件,因为除了Touchable组件的嵌套onPress事件之外,它还触发了onTouchStart事件。

<View
      pointerEvents="box-none"
      onTouchStart={(evt: GestureResponderEvent) => console.log("outerHandler")}>
       <TouchableOpacity
          onPress={(evt: GestureResponderEvent) => console.log("innerHandler")}>
              <Text>Press me</Text>
       </TouchableOpacity>
</View>
nnsrf1az

nnsrf1az3#

难道你不应该删除外部的onPress吗?我不确定我是否理解这个问题,但是尝试在外部的可触摸高亮上使用event.preventDefault,以便只访问内部的高亮。

<TouchableHighlight style={{ flex: 1 }} onPress={(event) => { event.preventDefault() }}>
    <TouchableHighlight style={{ flex: 0.8, backgroundColor: 'blue' }} onPress={() => { console.log('inner press') }}>
        <Text>1</Text>
    </TouchableHighlight>
</TouchableHighlight>

相关问题