react-native - 当withRepeat isFinished时如何设置状态

Question

我正在尝试在 withRepeat 回调中设置状态，以在动画完成但应用关闭时显示按钮。如何根据动画结束更新状态？

  const [showBtn, setShowBtn] = React.useState(false);
  
  // ...

  React.useEffect(() => {
    circle.value = withRepeat(
      withSequence(
        withTiming(1, {
          duration: 4000,
        }),
        withTiming(1, {
          duration: 2000,
        }),
        withTiming(0, {
          duration: 4000,
        })
      ),
      2,
      false,
      (isFinished) => {
        setShowBtn(true); // <- app closes
      }
    );
  }, [showBtn]);

  return (
    {showBtn && (
      <Button onPress={() => {
        circle.value = 0;
        setShowBtn(false);
      }}>Restart</Button>
    )}
  )

Answer 1

我找到了答案，我之前确实尝试过但没有用，所以我又看了一遍关于 runOnJs 的 2 文档

我没有在 runOnJs 中使用 seState，而是创建了一个函数，然后调用 runOnJs(updateShowBtn)();

更新代码：

const updateShowBtn = () => {
  setShowBtn(true);
};

...

(isFinished) => {
  if (isFinished) {
    runOnJS(updateShowBtn)();
  }
}