React Native中父页面使用useAnimatedStyle导致跳转后页面的ScrollView点击内容时向上跳转

这种情况我做项目时碰到过好几次，大概率是react-native-reanimated的动画状态在页面跳转后没被正确清理，残留的动画值干扰了新页面ScrollView的滚动行为——你说的跳转后点击会跳头部高度的距离，基本就是动画残留的锅。给你几个实用的解决思路：

• 卸载组件时重置动画状态
  在使用useAnimatedStyle的MovableListViewItem组件里，用useEffect的清理函数把动画用到的SharedValue（或者Animated.Value）重置回初始值，确保组件卸载时不会留下残留的动画状态。比如：

  import { useSharedValue } from 'react-native-reanimated';
  import { useEffect } from 'react';
  
  const MovableListViewItem = () => {
    const translateY = useSharedValue(0);
  
    useEffect(() => {
      // 组件卸载时重置动画值
      return () => {
        translateY.value = 0;
      };
    }, [translateY]);
  
    // ... 其他组件代码
  };
  

• 目标页面聚焦时重置滚动状态
  用React Navigation提供的useFocusEffect，在跳转后的目标页面（带ScrollView的那个）每次聚焦时，重置ScrollView的滚动位置，避免残留的滚动干扰。示例代码：

  import { useFocusEffect } from '@react-navigation/native';
  import { ScrollView, useRef } from 'react-native';
  import React from 'react';
  
  const TargetScreen = () => {
    const scrollRef = useRef(null);
  
    useFocusEffect(
      React.useCallback(() => {
        // 每次页面进来时，把滚动位置重置到顶部（也可以根据需求保留之前的位置）
        scrollRef.current?.scrollTo({ y: 0, animated: false });
      }, [])
    );
  
    return (
      <ScrollView ref={scrollRef}>
        {/* 你的页面内容 */}
      </ScrollView>
    );
  };
  

• 移除动画监听（如果有）
  如果你在父页面的组件里给动画值加了监听（比如addListener），一定要在组件卸载时移除这个监听，不然监听会一直存在，可能影响后续页面的布局计算：

  const listenerId = translateY.addListener(({ value }) => {
    // 处理动画值的逻辑
  });
  
  useEffect(() => {
    return () => {
      translateY.removeListener(listenerId);
      translateY.value = 0;
    };
  }, [translateY, listenerId]);
  

• 临时排查过渡动画冲突
  有时候React Navigation的页面过渡动画和reanimated的动画会有冲突，你可以先试试跳转时禁用过渡动画，看看问题是否消失：

  router.push({
    screen: 'TargetScreen',
    options: {
      animation: 'none', // 临时禁用过渡动画
    },
  });
  

  如果禁用后问题解决了，那可以调整过渡动画的配置，或者等过渡完成后再初始化ScrollView的内容。

你可以先从第一个方法开始试，大部分情况下重置动画状态就能解决这个问题啦。

备注：内容来源于stack exchange，提问作者Lukas Hirsch