如何开发复杂元素

时间:2017-03-11 14:08:46

标签: svg react-native react-native-android react-native-ios

美好的一天。 如何开发下一个元素? image

[I managed to do with HTML](https://jsfiddle.net/msn18pgL/)

使用react-native-svg转换为react-native

    <View style={{width: 200}}>
        <Svg width="200" height="160" viewBox="0 0 196.7 160" >
            <G>
                <Defs>
                    <Path
                        id="SVGID_1_"
                        d="M179.3,29H13.8c0,0-7.7-0.1-10.5-2.9C1.2,23.9,0,21.3,0,21.3v121.3c0,9.6,7.8,17.3,17.3,17.3h162c9.6,0,17.3-7.8,17.3-17.3V46.3C196.7,36.8,188.9,29,179.3,29z" />
                </Defs>
                <ClipPath id="SVGID_2_">
                    <Use href="#SVGID_1_" style={{overflow: "visible"}} />
                </ClipPath>
                <G clipPath="url(#SVGID_2_)">
                    <Image
                        style={{overflow: "visible"}}
                        width="200"
                        height="160"
                        href={this.props.image}
                        transform="matrix(0.1354 0 0 0.1354 -10.4909 17.5768)" />
                </G>
            </G>
        </Svg>
    </View>;

transform =&#34; matrix(0.1354 0 0 0.1354 -10.4909 17.5768)&#34; - 这不对!

我找到了react-native transform props 但我不知道如何在反应原生

上正确写作

1 个答案:

答案 0 :(得分:0)

我认为问题是你在Svg标签中混合了一个我认为该模块不支持的标签。你应该用Svg标签来做图像。删除Image标签,它应该工作。