MapView - 放置在彼此顶部的图标答案

【问题标题】：MapView - icons placed on top of each otherMapView - 放置在彼此顶部的图标
【发布时间】：2018-05-07 13:47:37
【问题描述】：

我在 react-native 中有一个谷歌地图。在该视图的顶部，我在地图上有图标，这些图标彼此重叠放置，而不是放置在地图的任一侧。我尝试了许多不同的设置，但结果总是相同。另一件事是，当我不点击它时，按钮会做出反应。

我有容器，然后容器内有 mapview。代码如下：

container: {
    flex: 1,
    flexDirection: 'column'
},
map:{
    height: 90+ "%",
    flexDirection: 'column'
},
profileBtn:{
    position: 'absolute',
    top: 25,
    right: 30,
    width: 25,
    height: 15,
    borderRadius: 25/2,
},
homeBtn:{
    position: 'absolute',
    top: 20,
    left: 5,
    width: 200,
    height: 100,
    borderRadius: 25/2,
},

<MapView
    style={styles.map}
    initialRegion={{
        latitude:this.state.latitude,
        longitude:this.state.longitude,
        latitudeDelta: 0.0043,
        longitudeDelta: 0.0034
    }}
    ref={c => this.mapView = c}
    onPress={this.onMapPress}
    loadingEnabled={true}
>
    <View style ={styles.topMap}>
        <TouchableOpacity
            style={styles.profileBtn}
            onPress={()=>{ this.handleClickProfile() }}
        >
            <Image
                source={profile}
                borderRadius={17}
            />
        </TouchableOpacity>
        <TouchableOpacity
            style={styles.homeBtn}
            onPress={()=>{ this.handleClickFavourite() }}
        >
            <Image
                source={require("./home.png")}
                borderRadius={49}
            />
        </TouchableOpacity>
    </View>
    {markers}

【问题讨论】：

你也可以添加MapView的代码吗？
添加到 op.谢谢！

标签： javascript css reactjs react-native

【解决方案1】：

我不确定为什么会发生这种情况，但我从here 阅读了源代码，当您显示MapView 时，它会返回：

return (
    <AIRMap
        ref={ref => { this.map = ref }}
        {...props}
    />
)

通常，当您编写自定义视图时，您会这样做：

return (
    <AIRMap
        ref={ref => { this.map = ref }}
        {...props}
    >
        {children}
    </AIRMap>
)

也许这就是为什么你的MapView 的孩子没有按照你想要的方式渲染。但是，要解决这个问题，您可以简单地将视图移出MapView，然后将所有内容包装在View 中：

return (
    <View style={{ flex: 1 }}>
        <MapView style={styles.map}>
            {markers}
        </MapView>
        <TouchableOpacity ... />
        <TouchableOpacity ... />
    </View>
)

但请记住，所有TouchableOpacity 必须有position: 'absolute'，否则您的MapView 不会占据整个屏幕

【讨论】：

【解决方案2】：

这些按钮被一个接一个地添加，因为您使用了position:absolute 作为按钮。如果您打算在地图上使用标记，请这样做

import { Marker } from 'react-native-maps';

<MapView
  region={this.state.region}
  onRegionChange={this.onRegionChange}
>
  {this.state.markers.map(marker => (
    <Marker
      coordinate={marker.latlng}
      title={marker.title}
      description={marker.description}
    />
  ))}
</MapView>

访问this了解更多信息

【讨论】：