Question

我在TouchableOpacity和react-native-maps方面有问题。

我有一个带有MapView和一个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必须具有白色背景色，如下所示：

<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上方的所有点击视为地图本身中的点击。

任何人都有解决该问题的线索吗？我确实需要在“视图”中有一个背景，因此无法删除它。

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

Answer 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 的组件。我发现使用“%”定义非常适合此目的，因为它会根据设备显示的大小动态适应您的屏幕。

在具有backgroundColor的MapView上方时，TouchableOpacity无法单击

2 个答案: