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

doinxwow 于 2023-06-06 发布在 React

关注(0)|答案(4)|浏览(145)

容器视图中的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。

react-native

来源：https://stackoverflow.com/questions/42778612/how-to-give-border-radius-to-map-in-react-native

4条答案

按热度按时间

brccelvz1#

你可以设置

overflow: 'hidden'

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

赞(0）回复(0）举报 2023-06-06

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

赞(0）回复(0）举报 2023-06-06

nkkqxpd93#

使用borderRadius和hiding 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>

赞(0）回复(0）举报 2023-06-06

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

赞(0）回复(0）举报 2023-06-06

我来回答

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

4条答案

相关问题

热门标签

最新问答