React Native 使用 useEffect 钩子移除 scrollY 监听器

Question

const [scrollY] = useState(new Animated.Value(0));
const [scrollYValue, setScrollYValue] = useState(0);

useEffect(() => {
  scrollY.addListener(({ value }) => {
    setScrollYValue(value);
  });
  return scrollY.removeAllListeners();
}, [scrollY, scrollYValue, setScrollYValue]);

目标是实例化一个名为 scrollY 的 Animated.Value 并添加一个将当前滚动值设置为状态的侦听器。此滚动值 scrollYValue 在组件之间共享，因此它们可以根据用户滚动的距离做任何他们需要做的事情。

如果我删除 return scrollY.removeAllListeners(); 行，一切正常，但我确实想在卸载此组件时删除侦听器。

这是我的 useEffect 依赖数组不正确的情况吗？它似乎立即删除了侦听器并且 scrollY 只是固定在 0.

Answer 1

更新：useEffect 中的 return 值应该是一个函数：

useEffect(() => {
  scrollY.addListener(({ value }) => {
    setScrollYValue(value);
  });
  return () => scrollY.removeAllListeners();
}, [scrollY, scrollYValue, setScrollYValue]);

React Native 使用 useEffect 钩子移除 scrollY 监听器

React native remove scrollY listener with useEffect hook

reactjs

react-native

react-hooks

use-effect