React Native Maps 问题与覆盖组件

Question

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

中的描述使用 '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我正在尝试变成一个搜索栏。

谢谢大佬

Answer 1

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

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

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)',
  },
});

Answer 2

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

React Native Maps 问题与覆盖组件

React Native Maps issue with overlaying components

react-native-maps