react-native - 在本机反应中隐藏重叠svg的背景

Question

我正在尝试创建两个相互重叠的圆圈的形状，我已经成功地完成了，只是重叠部分显示的是背景图像，而不是设置在圆圈内的图像，并且在 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>


const styles = StyleSheet.create({
    background: {
        width: 'auto',
        height: '100%',
    },
})

Answer 1

这是 ImageBackground 中的常见问题

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

尝试设置 imageStyle

 <ImageBackground
    imageStyle={{
      resizeMode: 'contain',//or try anohter style
      overflow: 'visible',
   }}
  >