在react native中使用react-native-svg时随机崩溃

Question

我正在使用react-native-svg在react native中创建速度计，它工作正常，但我面临随机崩溃。这个问题是在android中。 crashlytics 中的问题：

“com.facebook.react.bridge.JSApplicationIllegalArgumentException： 更新类型阴影节点中的属性“高度”时出错： RCT查看”

“com.facebook.react.bridge.JSApplicationIllegalArgumentException： 更新类型为 RCTView 的影子节点中的属性“宽度”时出错

“com.facebook.react.bridge.JSApplicationIllegalArgumentException： 更新类型影子节点中的属性“marginTop”时出错： RCT视图”

“com.facebook.react.bridge.JSApplicationIllegalArgumentException： 更新类型阴影节点中的属性“paddingLeft”时出错： RCT视图”

如果有人能帮助我解决问题，这对我将非常有帮助。谢谢。这是我的 SVG 代码。

我正在使用以下版本：

"react-native": "^0.55.0", 
"react-native-svg": "^8.0.10",



 render () {
    const {angle} = this.state;
    return (

        <Svg width={300} height={200} viewBox="0 0 300 200">
            <G >
                <Path
                    onPress={() => this.onPressFuel(0)}
                    fill="#ed5a41"
                    d="M20 150a130 130 0 0 1 5.266-36.625l57.57 16.904A70 70 0 0 0 80 150z"
                    stroke="#ed5a41" 
                />
                <Path
                    onPress={() => this.onPressFuel(1)}
                    fill="#ed5a41"
                    d="M25.266 113.375a130 130 0 0 1 15.371-33.658l50.475 32.438a70 70 0 0 0-8.277 18.124z"
                    stroke="#ed5a41"
                />
                <Path
                    onPress={() => this.onPressFuel(2)}
                    fill="#ed5a41"
                    d="M40.637 79.717a130 130 0 0 1 24.231-27.964l39.292 45.345a70 70 0 0 0-13.048 15.057z"
                    stroke="#ed5a41"
                />
                <Path
                    onPress={() => this.onPressFuel(3)}
                    fill="#dfd513"
                    d="M64.868 51.753a130 130 0 0 1 31.128-20.005l24.925 54.578a70 70 0 0 0-16.761 10.772z"
                    stroke="#dfd513"
                />
                <Path
                    onPress={() => this.onPressFuel(4)}
                    fill="#dfd513"
                    d="M95.996 31.748a130 130 0 0 1 35.503-10.425l8.539 59.39a70 70 0 0 0-19.117 5.613z"
                    stroke="#dfd513"
                />
                <Path
                    onPress={() => this.onPressFuel(5)}
                    fill="#dfd51d"
                    d="M131.5 21.323a130 130 0 0 1 37 0l-8.538 59.39a70 70 0 0 0-19.924 0z"
                    stroke="#dfd51d"
                />
                <Path
                    onPress={() => this.onPressFuel(6)}
                    fill="#dfd513"
                    d="M168.5 21.323a130 130 0 0 1 35.504 10.425l-24.925 54.578a70 70 0 0 0-19.117-5.614z"
                    stroke="#dfd513"
                />
                <Path
                    onPress={() => this.onPressFuel(7)}
                    fill="#dfd513"
                    d="M204.004 31.748a130 130 0 0 1 31.128 20.005L195.84 97.098a70 70 0 0 0-16.76-10.772z"
                    stroke="#dfd513"
                />
                <Path
                    onPress={() => this.onPressFuel(8)}
                    fill="#59ba87"
                    d="M235.132 51.753a130 130 0 0 1 24.231 27.964l-50.475 32.438a70 70 0 0 0-13.048-15.057z"
                    stroke="#59ba87"
                />
                <Path
                    onPress={() => this.onPressFuel(9)}
                    fill="#59ba87"
                    d="M259.363 79.717a130 130 0 0 1 15.371 33.658l-57.57 16.904a70 70 0 0 0-8.276-18.124z"
                    stroke="#59ba87"
                />
                <Path
                    onPress={() => this.onPressFuel(10)}
                    fill="#59ba87"
                    d="M274.734 113.375A130 130 0 0 1 280 150h-60a70 70 0 0 0-2.835-19.721z"
                    stroke="#59ba87"
                />
            </G>
            <G >
                <Text transform="translate(10 150)">
                    {'E'}
                </Text>
                <Text transform="translate(140 15)">
                    {'1/2'}
                </Text>
                <Text transform="translate(290 150)">
                    {'F'}
                </Text>
            </G>
            <G  transform="translate(150,150)">
                <Path
                    d="M5,0C4.998730371544071,-0.032502488471773616,1.6666666666666667,-128,0,-128S-5,0,-5,0S-1.6666666666666667,5,0,5S4.583333333333333,0.4166666666666667,5,0"
                    transform={`rotate(${angle})`}></Path>
            </G>
        </Svg>
    );
}`

Answer 1

我相信这是您遇到的问题。它似乎已在 React Native 0.57.4 中修复。

Answer 2

如果您正在使用：- 博览会然后 - >博览会安装react-native-svg react-native-qrcode-svg 反应本机->npm安装react-native-svg反应-native-qrcode-svg

如果使用 expo，则再次构建应用程序 sudo npx expo run:android --variant release
检查->/android/app/build/outputs/apk/release/app-release.apk 在您的 Android 手机中尝试 -> app-release.apk