使用覆盖组件来响应本机地图问题

时间:2018-10-23 14:17:49

标签: react-native-maps

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

<button onClick={()=>home.renderNewCard()}>New</button>

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,但是尝试覆盖的元素之一需要捕获输入,特别是TextInput尝试变成搜索栏。

谢谢邦格

2 个答案:

答案 0 :(得分: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)', }, });

{{1}}

答案 1 :(得分:1)

我们服用了mapbox药,整个团队的生活在很多方面都比以前更好了:)