无法使用borderRadius 制作react-native-maps

Posted 2023-02-19

【中文标题】无法使用borderRadius 制作react-native-maps

【英文标题】：Can't make react-native-maps with borderRadius

【发布时间】：2022-01-24 02:35:57

【问题描述】：

我正在使用 react native，我想将 borderRadius 添加到我的谷歌地图视图中，但没有成功

<View
        style=
          backgroundColor: "#fff",
          flex: 1,
          borderRadius: 30,
          margin: 20,
        
      >
        <Map />
      </View>
      <View
        style=
          marginTop: 40,        
          flexDirection: "column",
          justifyContent: "center",
          height: 300,
          width: 370,
        
      >

地图组件：

const Map = () => 
  return (
    <MapView
      style=tw`flex-1`
      customMapStyle=mapStyle
      initialRegion=
        latitude: 37.78825,
        longitude: -122.4324,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
      
    />
  );
;

result here

那么我该如何正确地做到这一点呢？

【参考方案1】：

您应该将组件映射到视图中，将borderRadius 和溢出属性设置为“隐藏”，如下所示：

const Map = () => 
  return (

    <View
      style=
        borderRadius: 50,
        overflow: "hidden"
      
    >
      <MapView
        style=tw`flex-1`
        customMapStyle=mapStyle
        initialRegion=
          latitude: 37.78825,
          longitude: -122.4324,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        
      />
    </View>
    
  );
;

【讨论】：

谢谢，辛苦了！

【参考方案2】：

这对我有用，使用 alightItems 添加溢出和居中

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

没问题！您介意接受它作为答案，以便将这个问题标记为已完成吗？谢谢！