在具有 backgroundColor 的 MapView 上方时，TouchableOpacity 不可点击

Posted 2023-03-15

【中文标题】在具有 backgroundColor 的 MapView 上方时，TouchableOpacity 不可点击

【英文标题】：TouchableOpacity not clickable when above a MapView with backgroundColor

【发布时间】：2019-06-04 13:46:03

【问题描述】：

我在使用 TouchableOpacity 和 react-native-maps 时遇到问题。

我有一个带有 MapView 和一个 View 的 View，里面有一个绝对定位的 TouchableOpacity，如下面的代码：

<View style= flex: 1, flexDirection: 'column-reverse' >
  <MapView style= flex: 1  />
  <View style= height: 55 >
    <TouchableOpacity style= position: 'absolute', top: 100 >
      <Text>Button</Text>
    </TouchableOpacity>
  </View>
</View>

当我在这种情况下单击 TouchableOpacity 时，它按预期工作，但我需要我的内部视图具有白色背景色，如下所示：

<View style= flex: 1, flexDirection: 'column-reverse' >
  <MapView style= flex: 1  />
  <View style= height: 55, backgroundColor: '#ffffff' >
    <TouchableOpacity style= position: 'absolute', top: 100 >
      <Text>Button</Text>
    </TouchableOpacity>
  </View>
</View>

但是，一旦我将 backgroundColor 标签放入样式中，TouchableOpacity 就完全停止工作，并且 MapView 上方的所有点击实际上都被视为地图本身的点击。

有人知道如何解决这个问题吗？我确实需要在 View 中有一个背景，所以无法删除它。

【问题讨论】：

您是否尝试过禁用View 上的pointerEvents 属性？当backgroundColor not transparent 时，它可能在到达TouchableOpacity 之前捕获/吞下事件。

刚刚尝试过（我不知道 PointerEvents），但不幸的是它仍然不起作用。对我来说，目前的快速解决方案是将两个组件放在另一个视图中，并在这个外部视图中设置背景。

【参考方案1】：

尝试将视图放在 TouchableOpacity 中。

<View style= flex: 1, flexDirection: 'column-reverse' >
  <MapView style= flex: 1  />
  <TouchableOpacity style= position: 'absolute', top: 100 >
      <View style= height: 55, backgroundColor: '#ffffff' >
          <Text>Button</Text>
      </View>
  </TouchableOpacity>
</View>

【讨论】：

这对我不起作用，因为我需要视图中的各种按钮，但如果我只需要一个按钮，代码就可以工作。谢谢

你找到解决办法了吗？

【参考方案2】：

为自己找到了解决方案。如果你导入 TouchableOpacity，不要这样做：

import  TouchableOpacity  from "react-native-gesture-handler";

而是这样做：

import TouchableOpacity from 'react-native';

之后，您只需将 TouchableOpacity 直接放在 MapView 下方，就像我在这里所做的那样：

         <View style=styles.container>
            <MapView 
                style=styles.map
                zoomEnabled = true
                maxZoomLevel=10
                rotateEnabled=false
                loadingEnabled=true
                onPress=e => 
                    console.log(e.nativeEvent.coordinate);
                    handleMapPress(e.nativeEvent.coordinate);
                
            />
            <TouchableOpacity style=position: "absolute", bottom: "90%", left:"5%">
                <AntDesign name="caretleft" size=40 color="orange"/>     
            </TouchableOpacity>
        </View>

您还可以将多个组件放置在 MapView 上，只需确保将它们放置在 MapView 下方，但在您的主视图中，该主视图将所有内容都包裹起来。

如果您想定位覆盖 MapView 的项目，请使用以下道具：

style=position: "absolute", bottom: "90%", left:"5%"

right、left、bottom、top 用于定位您的组件覆盖 MapView。我发现使用“%”定义非常适合此目的，因为它会根据设备显示的大小动态适应您的屏幕。