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：空圓與背景顏色？

回答

相關問題