Javascript 在react native中每隔几秒钟更改图形的最佳方法，以及如何处理更改图形的动画和api调用？

这里是初学者。我想找出最好的方法，让四个图表每10秒左右改变一次。 以下是我正在使用的代码：

const Card = () => {
    const [num, setNum] = useState(1)
    
      if (num == 4) {
        setNum(0) }
    
      useEffect(() => {
        const interval = setInterval(() => {
          setNum(prevNum => prevNum + 1);
        }, 10000);
        return () => clearInterval(interval);
      }, []);
    
        return(
            <Card containerStyle={styles.cardStyle} wrapperStyle={{flex: 1}}>
                <Chart1 num={num} />
                <Chart2 num={num} />
                <Chart3 num={num} />
                <Chart4 num={num} />
            </Card>
        );
}

const Card=（）=>{
常量[num，setNum]=useState（1）
如果（num==4）{
setNum（0）}
useffect（（）=>{
常量间隔=设置间隔（（）=>{
setNum（prevNum=>prevNum+1）；
}, 10000);
return（）=>clearInterval（interval）；
}, []);
返回(
);
}

我正在使用react本机图表工具包，它在每个图表1、图表2等中呈现。所有图表组件都有一个显示：无。我在想，通过将0-3中的数字作为状态传递，我可以将特定图表组件的图形设置为display:Block，例如（如果num=0，图表1将切换为display:Block，因为该num是作为道具传递的）

我有三个问题： 首先，这是最好的方法吗

其次，每个图表都有自己的特定数据，需要从API获取这些数据。我认为从卡片组件获取数据并将所需状态传递给每个子图表组件是最好的主意。但是，我对如何使用useEffect启动api调用感到困惑，因为它有一个设置的interval函数。换句话说，当useEffect运行set interval函数时，如何触发api调用一次

第三：当组件在react native中从display:block->none->block切换时，是否有任何方法向组件添加动画

谢谢大家