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

来源

2017-01-23 Edmund

可能希望检出http://stackoverflow.com/questions/8286550/transparent-hollow-or-cut-out-circle –

单靠React Native造型无法实现。你可以使用'react-native-svg'，或者编写一个自定义本地模块来渲染带有android.graphics/CoreGraphics的蒙面圆。我之前已经实现了这一点，让我看看我是否可以以某种方式将它打包为开源版本。 – jevakallio

谢谢@jevakallio。我开始研究这个软件包，会让你知道它怎么走 – Edmund

我所能想象的一个简单方法就是对覆盖层和透明圆圈进行png处理。

下面是用图像作为背景为例：https://rnplay.org/apps/mA780Q

还要注意，你需要设置pointerEvents={'none'}属性圆形图片。

来源

2017-01-23 16:24:34 zvona

你好我认为这是最简单的解决方案。在我的情况下，地图位置将始终在同一个地方，所以它是有道理的 – Edmund

React Native：空圆与背景颜色？

回答

相关问题