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 im 试图变成搜索栏。

谢谢一根邦

Answer 1

react-native-maps有一个<Overlay>组件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药丸，整个团队在很多方面都变得更好了：(