react-native-svg-图表不动画

Question

我正在使用react-native-svg-charts，动画不工作。下面是代码

function AnimusScreen  ()  {

    const [lineChartData, setLineChartData] = useState([
        {
          data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          svg: { stroke: Colors.cosmic, strokeWidth: 1, },
        }
      ])


      const changea = ()=>{

        setLineChartData([
            {
              data: [50, 10, 40, 95, -4, -24, 85, 50, -20, -80],
              svg: { stroke: Colors.cosmic, strokeWidth: 1, },
            }
          ])

      }

    return (
      <View
        style={{
          flex: 1,
          flexDirection: "column",
          justifyContent: "center",
          alignItems: "center"
        }}
      >
        <View
          style={{
            flex: 1,
            justifyContent: "center",
            alignItems: "center",
            alignSelf: "stretch"
          }}
        >

            
        <LineChart
            style={{
              flex: 1,
              alignSelf: "stretch",
              borderWidth: 1,
              borderColor: "rgba(255,255,255,0.5)",
              margin: 10
            }}
            data={lineChartData}
            svg={{
              strokeWidth: 2,
              stroke: Colors.cosmic
            }}
            animate
          />


        </View>

        <View
          style={{
            flex: 1,
            justifyContent: "center",
            alignItems: "center",
            alignSelf: "stretch"
          }}
        >
          <View
            style={{
              flex: 1,
              justifyContent: "center",
              alignItems: "center",
              alignSelf: "stretch"
            }}
          >
            <Text>My  Chart :D x</Text>
          </View>
        </View>
        <TouchableOpacity
        onPress={() => changea()}
      >
        <Text>Press Here</Text>
      </TouchableOpacity>
      </View>
    );
  
}

export default AnimusScreen;

Answer 1

使用svg图表会有一些问题，比如当你按下代码中的按钮时，BarChart就会变成动画，但LineChart不会。如果你需要一个专门用于LineChart的动画，我建议你使用不同的library。此外，您还可以查看D3和ART实现的example。