Question

这就是我想要做的事情：

我正试图在地图视图上放置一个透明圆圈（如放大镜），两侧有深蓝色覆盖层。这是我到目前为止（故意黑色）：

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

Answer 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;

Answer 2

所有我能想到的 - 作为一种简单的方法 - 就是在它上面加上覆盖和透明圆圈。

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

另请注意，您需要为圆圈图片设置<IfModule mod_rewrite.c> RewriteCond %{HTTPS} !=on RewriteCond %{HTTP_HOST} !^www\. [NC] RewriteCond %{SERVER_ADDR} !=127.0.0.1 RewriteCond %{SERVER_ADDR} !=::1 RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.*)/$ /$1 [L,R=301] RewriteRule ^ http://www.%{HTTP_HOST}%{REQUEST_URI} [R=301,L] RewriteCond $1 !^(images|system|themes|index\.php|admin\.php|favicon\.ico|robots\.txt|humans\.txt|crossdomain\.xml) [NC] RewriteRule ^(.*)$ index.php/$1 [L] RewriteCond %{THE_REQUEST} ^GET.*index\.php [NC] RewriteRule (.*?)index\.php/*(.*) /$1$2 [R=301,NE,L] </IfModule>属性。

Answer 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;

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

3 个答案: