我正在使用 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,
}}
/>
);
};
結果在這里
那么我該如何正確地做到這一點呢？
uj5u.com熱心網友回復：
您應該將視圖中的組件映射為將 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>
);
};
uj5u.com熱心網友回復：
這對我有用，使用 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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/392426.html