这就是我要做的:React Native:空圆与背景颜色?
我试图把在地图视图的透明圆(像放大镜),与在侧面上深蓝色的叠加。这是我迄今(这是故意黑):
import React from 'react';
import {
StyleSheet,
Text,
View,
} from 'react-native';
import MapView from 'react-native-maps';
const GEOFENCE_RANGE = 0.01;
const OrderMap = props => {
return (
<View style={[props.style, styles.container]} >
<MapView style={styles.map}
scrollEnabled={false}
initialRegion={{
latitude: 37.78825,
longitude: -122.4324,
}}
/>
<View style={styles.overlay}>
<View style={styles.circle}/>
</View>
</View>
)
};
const styles = StyleSheet.create({
container: {
position: 'relative',
},
map: {
flex: 1,
},
overlay: {
backgroundColor: 'rgba(21,31,53, 0.5)',
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
left: 0,
alignItems: 'center',
justifyContent: 'center',
},
circle: {
backgroundColor: 'black', // <---------------------------
borderRadius: 100,
alignSelf: 'stretch',
flex: 1,
margin: 50,
}
});
export default OrderMap;
当我试图改变styles.overlay
使用backgroundColor: 'transparent'
,它只是使整个事情的深蓝色。
有没有办法做到这一点?
P.S.我正在使用反应本地地图https://github.com/airbnb/react-native-maps
可能希望检出http://stackoverflow.com/questions/8286550/transparent-hollow-or-cut-out-circle –
单靠React Native造型无法实现。你可以使用'react-native-svg',或者编写一个自定义本地模块来渲染带有android.graphics/CoreGraphics的蒙面圆。我之前已经实现了这一点,让我看看我是否可以以某种方式将它打包为开源版本。 – jevakallio
谢谢@jevakallio。我开始研究这个软件包,会让你知道它怎么走 – Edmund