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

问题描述

这里是 React Native 的初学者。我试图找出让四个图表每 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>
        );
}

我正在使用在每个 Chart1、Chart2 等中呈现的 React Native 图表工具包，所有 Chart 组件都显示：none。我在想，通过从 0-3 传递一个数字作为状态，我可以将图形设置为显示：特定图表组件的块，例如（如果 num = 0，图表 1 将切换到显示：块，因为该 num 是作为道具流传下来）。

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

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

第三：有没有办法在组件从 display 切换时添加动画：block -> none -> block in react native？

谢谢大家

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）