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

Question

我正在使用 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

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

Answer 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>
    
  );
};

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