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

时间:2018-12-14 13:56:46

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

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

  

“ com.facebook.react.bridge.JSApplicationIllegalArgumentException:   在以下类型的阴影节点中更新属性“ height”时出错:   RCTView”

     

“ com.facebook.react.bridge.JSApplicationIllegalArgumentException:   更新阴影类型为“ RCTView”的阴影节点中的属性“宽度”时发生错误

     

“ com.facebook.react.bridge.JSApplicationIllegalArgumentException:   在以下类型的阴影节点中更新属性“ marginTop”时出错:   RCTView”

     

“ com.facebook.react.bridge.JSApplicationIllegalArgumentException:   在以下类型的阴影节点中更新属性“ paddingLeft”时出错:   RCTView”

如果有人可以帮助我解决问题,这对我将非常有帮助。谢谢。这是我的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>
    );
}`

1 个答案:

答案 0 :(得分:1)

我相信this是您遇到的问题。 appears to have been fixed在React Native 0.57.4中。