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

Question

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

Answer 1

您可以在 useEffect return 函数中清除侦听器。

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

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

如何在动画值超过 .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)

animation

react-native

react-native-reanimated