覆盖组件的 React Native Maps 问题答案

【问题标题】：React Native Maps issue with overlaying components覆盖组件的 React Native Maps 问题
【发布时间】：2020-06-22 21:23:19
【问题描述】：

我试图在地图的中间和地图上叠加一些元素，但无济于事。到目前为止，我已尝试按照文档中的说明使用“OverlayComponent”

render() {
  return (
    <MapView
      region={this.state.region}
    />
    <OverlayComponent
      style={{position: “absolute”, bottom: 50}}
    />
  );
}

这个组件似乎不再被react-native-maps真正导出为

import MapView, { OverlayComponent } from 'react-native-maps';

OverlayComponent 产生未定义的结果。

有什么想法吗？我有点不知该如何处理这个问题。

我尝试在地图上覆盖View，并将pointerEvents 设置为none，这可行，但我试图覆盖的元素之一需要捕获输入，特别是它试图变成搜索栏的TextInput。

谢谢你

【问题讨论】：

我相信OverlayComponent 只是一个组件的示例，而不是实际导出的东西。

标签： react-native-maps

【解决方案1】：

react-native-maps 有一个 <Overlay> Component API。这似乎只适用于图像。

为什么不通过绝对定位来覆盖TouchableOpacity 之类的东西并将整个东西包裹在<View> 中：

import { Text, TouchableOpacity, View } from 'react-native';
import MapView from 'react-native-maps';

...

render() {
  return (
    <View style={styles.container}>
      <MapView
        style={styles.map}
        ...
      />
      <TouchableOpacity style={styles.overlay}>
        <Text style={styles.text}>Touchable Opacity</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
  },
  map: {
    ...StyleSheet.absoluteFillObject,
  },
  overlay: {
    position: 'absolute',
    bottom: 50,
    backgroundColor: 'rgba(255, 255, 255, 1)',
  },
});

【讨论】：

感谢您的回复。这就是我最终做的事情，它有一些错误，比如捕获所有事件的视图，但最终都得到了解决。希望在文档中更清楚。 OverlayComponent 仍然产生 undefined 例如
@Return-1 你是如何阻止视图捕获所有事件的？

【解决方案2】：

我们服用了 mapbox 药丸，整个团队的生活在很多方面都变得更好了 :)

【讨论】：