可触摸不透明度在具有背景颜色的地图视图上方时不可单击

Question

我在使用可触摸不透明度和反应原生地图时遇到了问题。

我有一个带有 MapView 和一个视图的视图，里面有一个绝对定位的可触摸不透明度，就像下面的代码一样：

<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>

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

<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>

但是，一旦我将背景颜色标签放在样式中，可触摸不透明度就会停止工作，并且MapView上方的所有单击实际上都被视为地图本身中的单击。

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

Answer 1

为自己找到了解决方案。如果导入可触摸不透明度，请不要执行以下操作：

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

而是做：

import {TouchableOpacity} from 'react-native';

之后，您只需将可触摸不透明度直接放在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%"}}

右，左，下，上是定位你的组件覆盖MapView。我发现使用"%"定义非常适合此目的，因为它会根据设备显示的大小动态适合您的屏幕。

Answer 2

尝试将视图放置在可触摸不透明度中。

<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>