当withRepeat isFinished时如何设置状态答案

【问题标题】：How to setState when withRepeat isFinished当withRepeat isFinished时如何设置状态
【发布时间】：2021-11-22 14:22:09
【问题描述】：

我正在尝试在 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>
    )}
  )

【问题讨论】：

标签： react-native react-native-reanimated-v2

【解决方案1】：

我找到了答案，我之前确实试过这个但是没有用，所以我又看了reanimated 2 docs about runOnJs

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

更新代码：

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

...

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

【讨论】：