如何在React Native中给出边界半径来映射？

Question

容器视图内的MapView

<View style={styles.container}>
  <MapView style={[styles.map]}
    initialRegion={{
      latitude: 18.978189,
      longitude: 73.024911,
      latitudeDelta: 0.0922,
      longitudeDelta: 0.0421,
    }}
  />
</View>

为了给我的地图提供弯曲边框，我给容器视图提供了 borderRadius

const styles = {
 container:{
   marginTop:20,
   borderWidth:1,
   borderRadius:20
 },
 map:{
   height:200,
 },
}

这给了我的视图边框，我的视图实际上得到了 borderRadius，我通过给出 borderWidth:1 来交叉检查它。但我的地图没有得到容器的边界。地图角脱离容器视图边界。我应该怎么做才能为我的地图提供 borderRadius 。

Answer 1

可以设置

overflow: 'hidden' 

在你的容器中。它应该隐藏地图视图的溢出。

Answer 2

经过一些修补，发现了以下内容

            <View style={{ 
                height: moderateScale(300) - 60, 
                zIndex: -1, 
                borderRadius: 10, 
                borderWidth: 1, 
                borderColor: userInterface.buttonSelectedFill, 
                overflow: 'hidden',
                alignItems: 'center',
                justifyContent: 'center'}}>

                <MapView 
                    style={{flex: 1, height: '100%', width: '100%', borderRadius: 10, }} 
                    //ref={ map => {currentMap = map }}
                    //region={props.region}
                    rotateEnabled={false}
                    loadingEnabled={true}
                ></MapView>                
            </View>

overflow: 'hidden'

不起作用，直到我还制作了父级

alignItems: 'center'

和'justifyContent：'center'`

Answer 3

使用 borderRadius 和 隐藏溢出将其包装在父视图中就可以了！

<View style={{ alignSelf: 'center', top: 30, width: '75%', height: 200, borderRadius: 10, overflow: 'hidden' }}>
  <MapView
    style={{ width: '100%', height: 200 }}
    scrollEnabled={true}
    Region={{ latitude: latitude, longitude: longitude }}
    customMapStyle={mapStyle}
  >
    <Marker
      coordinate={{ latitude: latitude, longitude: longitude, latitudeDelta: 0.02, longitudeDelta: 0.02 }}
      pinColor={"white"}
      title={"You are here"}
    />
  </MapView>
</View>

Answer 4

 <View style={styles.mapContainer}>
        <MapView
          region={{
            latitude: 37.78825,
            longitude: -122.4324,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
         
        </MapView>
 </View>

容器样式如下

mapContainer:{
    width: responsiveWidth(95),
    height: responsiveHeight(25),
    borderRadius: responsiveWidth(3),
    overflow: 'hidden',
  
  },

  

Answer 5

您可以使用以下代码

MapView & Marker

包裹在

parent view with borderRadius and hiding overflow

,

内

<View style={{ width: "95%", borderRadius: moderatescale(20),borderWidth:moderatescale(2),borderColor:'#fff',  backgroundColor: '#fff', justifyContent: 'center', alignItems: 'center', alignSelf: 'center',overflow: 'hidden', shadowColor: 'rgba(0,0,0,0.3)', shadowOffset: { width: 0, height: 2, }, shadowOpacity: 0.25, shadowRadius: 3.84, elevation: 5, }}>

<MapView
    ref={mapView}
    provider={PROVIDER_GOOGLE}
    style={{ width: "100%", height: verticalscale(150)}}
    initialRegion={{
        latitude: 25.276987,
        longitude: 55.296249,
        latitudeDelta: 0.0111,
        longitudeDelta: 0.0111,
    }}
>

    <MapView.Marker
        coordinate={{ latitude: 25.276987, longitude: 55.296249, }}
        title={"My Location"}
        image={require("your marker image")}
        style={{ width: moderatescale(20), height: verticalscale(20) }}
    >
        
    </MapView.Marker>

</MapView>
</View>