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

Question

初学者在这里反应原生。我试图找出最好的方法，让四个图表每 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 等中呈现的反应原生图表工具包，所有图表组件都有一个显示：无。我在想，通过将 0-3 之间的数字作为状态传递，我可以将图表设置为显示：特定图表组件的块，例如（如果 num = 0，图表 1 将切换为显示：块，因为该 num 是作为道具传下来）。

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

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

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

谢谢大家

标签： javascriptreactjsreact-nativechartsreact-native-chart-kit