React Native 中的嵌套 Touchables答案

【问题标题】：Nested Touchables in React NativeReact Native 中的嵌套 Touchables
【发布时间】：2017-01-04 08:11:51
【问题描述】：

我遇到了一个问题，嵌套的 Touchable 中的两次触摸（同时触摸）会到达父 Touchable。

在下面的示例中，Touchable 嵌套了三层。当我按下最深的可触摸（蓝色）时，控制台会正确打印“蓝色”。当我按下分别打印“绿色”和“红色”的其他图层时，它的行为也正确。

当我同时进行两次触摸和释放时，会出现奇怪的行为 - 然后触摸层的 onPress 根本不会被调用。相反，当两个触摸都结束时，父 Touchable 只接收一次触摸。

此外，当我在最外层（没有父可触摸的红色）上同时执行两个触摸时，该层将接收触摸。从我的角度来看，这似乎更正确，但偏离了上述嵌套 Tocuables 中的奇怪行为。

<View style={{flex:1, backgroundColor:"#666666"}}>

    <TouchableHighlight onPress={()=>{console.log("red")}}>
      <View style={{backgroundColor:"#FF0000", height:300}}>   
        <TouchableHighlight onPress={()=>{console.log("green")}}>
          <View style={{backgroundColor:"#00FF00", height:200}}>
            <TouchableHighlight onPress={()=>{console.log("blue")}}>
              <View style={{backgroundColor:"#0000FF", height:100}} />
            </TouchableHighlight>
          </View>
        </TouchableHighlight>
      </View>
    </TouchableHighlight>
</View>

【问题讨论】：

标签： javascript react-native touchablehighlight

【解决方案1】：

我复制了你的代码，我有点不知道它是否真的看起来像你想要实现的东西：https://snack.expo.io/@zvona/onpressin

Snack 不允许使用多次触摸，但我做一个远射：使用onPressIn 而不是onPress。

【讨论】：