2017-01-23 151 views
0

这就是我要做的:React Native:空圆与背景颜色?

enter image description here

我试图把在地图视图的透明圆(像放大镜),与在侧面上深蓝色的叠加。这是我迄今(这是故意黑):

enter image description here

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

+0

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

+0

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

+0

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

回答

1

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

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

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

+0

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