react-native - react-native-svg-charts 没有动画

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;

标签： react-nativeanimationcharts

Answer 1

使用 svg 图表的动画存在问题，例如，当您按下代码中的按钮时，BarChart 是动画的，但 LineChart 不是。如果您需要专门针对LineChart. 此外，您还可以查看此D3 和 ART 实施示例。