React Native：带有背景颜色的空圆圈？答案

【问题标题】：React Native: Empty circle with background color?React Native：带有背景颜色的空圆圈？
【发布时间】：2020-05-14 04:19:06
【问题描述】：

这就是我想要做的：

我正在尝试在地图视图上放置一个透明的圆圈（如放大镜），并在两侧覆盖深蓝色。这就是我目前所拥有的（故意是黑色的）：

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' 时，它只会使整个东西变成深蓝色。

有没有办法做到这一点？

附：我正在使用反应原生地图https://github.com/airbnb/react-native-maps

【问题讨论】：

可能想签出stackoverflow.com/questions/8286550/…
这不能单独使用 React Native 样式来实现。你可以使用react-native-svg，或者编写一个自定义的原生模块来使用 android.graphics/CoreGraphics 渲染一个蒙版的圆圈。我之前已经实现过，让我看看我是否可以将它打包用于开源发布。
感谢@jevakallio。我开始研究那个包裹，会告诉你进展如何
你做过了吗？我有样品问题。请分享您的解决方案

标签： react-native

【解决方案1】：

我已经尝试了上述示例，但未能产生任何有意义的结果。所以，经过一番修修补补，我设法解决了这个问题，并能够用背景图像制作一个透明的圆圈。这是带有屏幕截图的完整工作代码。

希望这会对最终来到这里的人有所帮助。

import React from 'react'
import {
  StyleSheet,
  View,
  ImageBackground,
} from 'react-native';
import { Svg, Defs, Rect, Mask, Circle } from 'react-native-svg';

const SvgCircle = (props) => {
  return (
    <Svg height="100%" width="100%">
      <Defs>
        <Mask id="mask" x="0" y="0" height="100%" width="100%">
          <Rect height="100%" width="100%" fill="#fff" />
          <Circle r="30%" cx="50%" cy="50%"
            fill="black"
          />
        </Mask>
      </Defs>
      <Rect height="100%" width="100%" fill="rgba(0, 0, 0, 0.8)" mask="url(#mask)" fill-opacity="0" />
    </Svg>
  );
}

const App = (props) => {
  return (
    <View style={styles.container}>
      <ImageBackground source={require('./assets/img.jpg')} style={styles.image}>
        <SvgCircle />
      </ImageBackground>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: "column"
  },
  image: {
    flex: 1,
    resizeMode: "cover",
    justifyContent: "center"
  },
  text: {
    color: "grey",
    fontSize: 30,
    fontWeight: "bold"
  }
});

export default App;

【讨论】：

【解决方案2】：

我能想到的——作为一种简单的方法——就是用覆盖和透明圆圈做 png。

这是一个以图片为背景的示例：https://rnplay.org/apps/mA780Q

另外请注意，您需要为圆形图像设置pointerEvents={'none'} 属性。

【讨论】：

是的，我认为这是最简单的解决方案。在我的情况下，地图位置总是在同一个地方，所以这是有道理的
链接已过期
@GeneSy 是正确的。我尝试从某个地方找到这个过期的代码并修改答案

【解决方案3】：

您可以使用我的代码轻松完成。我希望这将 100% 为你工作。

import { Svg, Defs, Rect, Mask, Circle } from 'react-native-svg';
const WrappedSvg = () => (
    <View style={{ aspectRatio: 1 }}>
        <Svg height="100%" width="100%" viewBox="0 0 100 100">
            <Defs>
                <Mask id="mask" x="0" y="0" height="100%" width="100%">
                    <Rect height="100%" width="100%" fill="#fff" />
                    <Circle r="45" cx="50" cy="50" />
                </Mask>
            </Defs>
            <Rect height="100%" width="100%" fill="rgba(0, 0, 0, 0.5)" mask="url(#mask)" fill-opacity="0" />
        </Svg>
    </View>
);

export class index extends Component {
    render() {
        return (
            <View style={{ backgroundColor: '#FFFFFF', flex: 1, justifyContent: 'center', alignItems: 'center' }}>

                <View style={{ width: Dimensions.get('window').width, height: 300, position: 'absolute' }}>
                    <WrappedSvg />
                </View>
            </View>
        );
    }
}

export default index;

【讨论】：