如何在React Native中将svg制成的具有自定义形状的元素包围起来？

Question

 renderUserProfile() {
        const headerHeight = this.state.deviceHeight * 0.45
        const headerRadius = 16
        const imageRadiusPercentage = 0.3
        const imageRadius = this.state.deviceWidth * imageRadiusPercentage
            const restImageRadiusPercentage = (1 - imageRadiusPercentage) * 0.5
            const imageTop = headerHeight - imageRadius * 2.3
            const footerHeight = this.state.deviceHeight - headerHeight - (imageRadius * 0.5)
            return (
                <View style={[{
                    borderBottomRightRadius: 20,
                    borderBottomLeftRadius: 111
                }]}>
                    <Animatable.View
                        animation={'fadeInDown'}
                        useNativeDriver={true}
                        style={{

                            width: this.state.deviceWidth,
                            height: headerHeight,
                        }}>
                        <LinearGradient
                            style={{ height: '100%' }}
                            colors={['#1E1E1E', '#797979']}>
                        </LinearGradient>
                        <Text style={[styles.fontFamily, {
                            fontSize: 25,
                            position: 'absolute', color: 'white',
                            width: this.state.deviceWidth, top: this.state.deviceHeight * 0.24, textAlign: 'center'
                        }]}>
                            {this.state.userInfoList.fullName}</Text>
                        <View style={[{
                            flexDirection: 'row',
                            alignItems: 'center',
                            justifyContent: 'center',
                            width: this.state.deviceWidth,
                            position: 'absolute',
                            top: this.state.deviceHeight * 0.315,
                        }]}>
                            <Text style={[styles.fontFamily, { fontSize: 18, color: 'white' }]}>
                                شیراز</Text>
                            <Entypo size={20}
                                style={{ paddingHorizontal: '1%' }} name="location-pin" color={"white"} />
                        </View>
                        <View style={{
                            position: 'absolute',
                            bottom: 0, left: this.state.deviceWidth * 0.08
                        }}>
                            <Text style={[styles.fontFamily, { fontSize: 25, color: 'white', textAlign: 'center' }]}>
                                {this.state.barterLstLength}</Text>
                            <Text style={[styles.fontFamily, {
                                fontSize: 25,
                                color: 'white'
                            }]}>
                                تاخت شده</Text>
                        </View>
                        <View style={{
                            position: 'absolute',
                            bottom: 0, right: this.state.deviceWidth * 0.08
                        }}>
                            <Text style={[styles.fontFamily, { fontSize: 25, color: 'white', textAlign: 'center' }]}>
                                18</Text>
                            <Text style={[styles.fontFamily, {
                                fontSize: 25,
                                color: 'white'
                            }]}>
                                برای تاخت</Text>
                        </View>
                    </Animatable.View>
                    <Animatable.View
                        delay={200}
                        animation={'fadeInUp'}
                        useNativeDriver={true}
                        style={{
                            position: 'absolute',
                            overflow: 'hidden',
                            backgroundColor: colors.background2,
                            top: imageTop,
                            left: this.state.deviceWidth * restImageRadiusPercentage,
                            width: imageRadius,
                            borderWidth: 4,
                            borderColor: 'white',
                            height: imageRadius,
                            borderRadius: imageRadius,
                            shadowRadius: imageRadius,
                            shadowColor: '#ffffff',
                        }}>
                        <TouchableOpacity style={{
                            width: imageRadius,
                            height: imageRadius,
                            borderRadius: imageRadius,
                            justifyContent: 'center',
                            alignItems: 'center',
                        }}>
                            <Animatable.View
                                delay={300}
                                animation={'fadeInDown'}
                                useNativeDriver={true}>
                                {this.renderProfilePhoto()}
                            </Animatable.View>
                        </TouchableOpacity>
                    </Animatable.View>
                </View>
            )
        }

/ *我对svgs有问题。我无法在svg完全覆盖该元素而不会从容器svg的任何边界抛弃内部元素的情况下，在svg中放入任何反应本机的基本元素，例如图像，文本和视图。我的意思是完全适合它，并且svg就像该元素的框架一样。它是移动应用程序中用户个人资料的标题部分，我想在该svg中放入主要用户信息，例如个人资料照片，姓名，日期等。除此之外，我必须说我的svg是自定义形状，而不是任何特殊形状。在这里，我把我的一部分代码。

如果有人可以帮助我，我将非常感激* /