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

【问题标题】：How can I propagate touch event in nested Touchable in React Native?如何在 React Native 的嵌套 Touchable 中传播触摸事件？
【发布时间】：2018-04-14 20:27:47
【问题描述】：

在我的应用程序中，我有一个嵌套的 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>

【问题讨论】：

能贴出代码吗？
@PritishVaidya 我在这里创建了一个小吃：snack.expo.io/@dgellow/restless-pizza

标签： reactjs react-native

【解决方案1】：

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。

你可以看看这个video

【讨论】：

感谢您的回答。对于其他想了解更多细节的人。你可以搜索onStartShouldSetResponder和onStartShouldSetResponderCapture

【解决方案2】：

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

【讨论】：