动画值超过 0.8 后如何触发函数并将当前状态传递给该函数（不是旧状态）

Posted 2023-02-19

【中文标题】动画值超过 0.8 后如何触发函数并将当前状态传递给该函数（不是旧状态）

【英文标题】：How to trigger a function once the animated value is over .8 and pass in the current state to that function(not old state)

【发布时间】：2021-12-24 03:13:03

【问题描述】：

一旦 reactAnimated 值超过 .8，我正试图触发这个名为 moveNow() 的函数。我目前正在使用 addListner() 执行此操作，并且每次我的 useContext 中名为 DATA_LAYER.names 的列表发生更改时，我都会添加一个侦听器。问题是，当值超过 0.8 时，过去使用旧版本 DATA_LAYER.names 的侦听器仍然会被触发。基本上，当 reactAnimated 值超过 0.8 时，我不想进入下一个屏幕，但如果名称列表不为空，我也只想进入另一个屏幕。 但是，如果我添加一个名称，然后删除并使 reactAnimated 值超过 0.8，它仍然会转到另一个屏幕，因为名称有名称时的旧侦听器仍然存在。

const DATA_LAYER = React.useContext(DataLayerContext);
const reactAnimated = React.useRef(new Animated.Value(0)).current;
/*
  Some simple functions to move the reactAnimated value
*/
const moveNow = () =>
    if (DATA_LAYER.names.length!==0)
      props.navigation.navigate("loadingscreen");
    



React.useEffect(()=>
    // Animated values
    reactAnimated.addListener(val=>
       if (val["value"]>.8)
          moveNow() // move to next page
       
    );


  ,[DATA_LAYER.names])

【参考方案1】：

您可以在useEffect 返回函数中清理监听器。

React.useEffect(()=>
    // Animated values
    reactAnimated.addListener(val=>
       if (val["value"]>.8)
          moveNow() // move to next page
       
    );

   return () => reactAnimated.removeAllListeners()
  ,[DATA_LAYER.names])

【讨论】：

非常感谢解决了我的问题