在React Native组件中使胜利饼图的endAngle动画化

Question

我在React Native中使用Victory Native图表，并尝试将Victory Pie图表的endAngle动画化为0到360，以产生类似于this的效果。

我提供了代码的简化版本。在某种程度上简化了我已经将动态数据硬编码为初始状态。我的代码如下：

import React, {Component} from "react";
import {Animated, View} from "react-native";
import {VictoryPie} from "victory-native";

export default class PieGraph extends Component {
    state = {
        data: [
            {
                "color": "#D8BDC4",
                "y": 6,
            },
            {
                "color": "#D88196",
                "y": 1,
            },
            {
                "color": "#B73756",
                "y": 3,
            },
        ],
        total: 10,
        endAngle: new Animated.Value(0),
    };

    componentDidMount() {
        Animated.timing(this.state.endAngle, {toValue: 360, duration: 2000}).start();
    }

    render() {
        const {data, total, endAngle} = this.state;

        return (
            <View style={{paddingTop: 40}}>
                <VictoryPie
                    animate={{duration: 2000}}
                    data={data}
                    labels={datum => total ? `${Math.round((datum.y / total) * 100)}%` : ''}
                    colorScale={data.map(({color}) => color)}
                    startAngle={0}
                    endAngle={endAngle}
                />
            </View>
        )
    }
}

如上所述对endAngle进行动画处理时，尽管this.state.endAngle从0更改为360，该图表也不会出现。没有错误或警告输出。

当为endAngle prop定义一个小于360但大于0的静态值时，图表将立即以该状态出现。省略endAngle支柱时，它立即显示为一个完整的圆圈。

我还尝试了在动画道具的onLoad.before属性上作为回调来启动动画，但是仍然得到相同的结果。