尝试使用react-native-svg库中的"Symbol“时出现NSInvalidArgumentException

Question

我尝试使用react-native-svg库，特别是使用Symbol元素，如下所示。我在这里使用了示例代码：

    <Svg
    height="150"
    width="110"
>
    <Symbol id="symbol" viewbox="0 0 150 110" width="100" height="50">
        <Circle cx="50" cy="50" r="40" strokeWidth="8" stroke="red" fill="red"/>
        <Circle cx="90" cy="60" r="40" strokeWidth="8" stroke="green" fill="white"/>
    </Symbol>

    <Use
        href="#symbol"
        x="0"
        y="0"
    />

当我运行这段代码时，我在日志中得到以下错误，应用程序崩溃：<Error>: *** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '*** -[NSRegularExpression enumerateMatchesInString:options:range:usingBlock:]: nil argument'

当我不使用Symbol对象时，一切都很正常。以前有没有人遇到过这个问题？

Answer 1

实际上，我可以通过将示例复制并粘贴到此页面来修复此问题：https://developer.mozilla.org/en-US/docs/Web/SVG/Element/symbol

您需要在Use标记上使用width和height元素，如下所示：

<Svg height="150" width="110">
            <Symbol id="symbol" viewbox="0 0 150 110" width="100" height="50">
                <Circle cx="50" cy="50" r="40" strokeWidth="8" stroke="red" fill="red"/>
                <Circle cx="90" cy="60" r="40" strokeWidth="8" stroke="green" fill="white"/>
            </Symbol>

            <Use href="#symbol" x="0" y="0" width="100" height="50"/>
        </Svg>

我肯定之前已经尝试过了，所以我可能也运行了以下清除缓存并重新编译命令：rm -rf node_modules && npm install和npm start -- --reset-cache

无论哪种方式，问题都解决了！