在React Native中从重叠的svg隐藏背景

时间:2019-12-31 06:48:48

标签: react-native svg react-native-svg

我正在尝试创建彼此重叠的两个圆的形状,并且我成功地做到了,只是重叠的部分显示的是背景图像,而不是设置在圆圈内的图像,而react-native-svg区域中的图像非常新,因此请帮助我...这是我的代码

 <ImageBackground source={require('../assets/images/20.png')} style={styles.background}>
            <Svg height={height} width="100%">
                <Defs>
                    <ClipPath id="clip">
                        <Circle cx="320" cy="230" r="250" />
                        <Circle cx="80" cy="150" r="180" />
                    </ClipPath>
                </Defs>
                <SvgImg
                    href={require('../assets/images/18.jpg')}
                    width={500}
                    height={500}
                    preserveAspectRatio="xMidYMid slice"
                    clipPath="url(#clip)"
                />
            </Svg>
        </ImageBackground>

enter image description here

1 个答案:

答案 0 :(得分:0)

这是ImageBackground中的常见问题

因为还需要为内部图片定义样式

尝试设置imageStyle

public class ChatHandlerConfigurator extends ServerEndpointConfig.Configurator
{
    @Override
    public void modifyHandshake(ServerEndpointConfig config, HandshakeRequest request, HandshakeResponse response)
    {
        Map<String, List<String>> map = request.getParameterMap();
        if (!map.containsKey("path")) {
            throw new IllegalArgumentException("path was not provided");
        }

        // Optionally add values to userProperties
        Map<String, Object> userProperties = config.getUserProperties();
        userProperties.put("path", map.get("path").get(0));
    }
}