如何在react native中为Map给予边界半径?

doinxwow  于 2023-06-06  发布在  React
关注(0)|答案(4)|浏览(147)

容器视图中的MapView

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

为了给我的Map给予弯曲的边界,我给容器视图提供了borderRadius

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

这给了我的视图边界,我的视图实际上得到了borderRadius,我通过给出borderWidth:1交叉检查了它。但是我的Map没有得到这个容器的边界。Map角离开容器视图边界。我应该怎么做才能给我的MapborderRadius。

brccelvz

brccelvz1#

你可以设置

overflow: 'hidden'

在你的集装箱里它应该隐藏mapView的溢出。

9cbw7uwe

9cbw7uwe2#

经过一些修改,我得出了以下结论

<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:中心

nkkqxpd9

nkkqxpd93#

使用borderRadiushiding overflow将其 Package 在父视图中就成功了!

<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>
kokeuurv

kokeuurv4#

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

相关问题