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

IT技术 reactjs react-native
2021-05-07 07:34:34

在我的应用程序中,我有一个嵌套的 Touchable 元素。每次我按下其中一个,我只得到一个事件。我可以将内部向下传播到层吗?提前致谢!

代码如下:

    <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>
2个回答

一个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想阻止孩子在触摸开始时成为响应者,它应该有一个onStartShouldSetResponderCapture返回true.

你可以看看这个视频

你不只是删除外部的 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>