Expo 55/React Native：滚动控制悬浮按钮可见性异常排查

我有一个包含可滚动课程内容的页面，设有两个按钮：

• 内容底部的CTA按钮
• 悬浮按钮，需满足：
  • 滚动时保持可见
  • 底部CTA可见时隐藏

该功能在升级到Expo 55前运行正常，但现在滚动至页面底部时，悬浮按钮无法可靠隐藏，具体表现：

• 有时滚动至底部时无法隐藏
• 行为随滚动速度变化，表现不一致

核心逻辑代码 #

const scrollAnim = useRef(new Animated.Value(0)).current;
const scrollYRef = useRef(0);

const quizSectionY = useRef<number | null>(null);
const [showFloatingQuizBtn, setShowFloatingQuizBtn] = useState(true);

const updateFloatingBtn = useCallback((y: number) => {
  if (quizSectionY.current === null) return;

  const quizTopOnScreen = quizSectionY.current - y;

  const isVisible = quizTopOnScreen < WINDOW_HEIGHT - 80;

  setShowFloatingQuizBtn(!isVisible);
}, []);

useEffect(() => {
  const id = scrollAnim.addListener(({ value }) => {
    scrollYRef.current = value;
    updateFloatingBtn(value);
  });

  return () => scrollAnim.removeListener(id);
}, []);

ScrollView 代码 #

<Animated.ScrollView
  onScroll={Animated.event(
    [{ nativeEvent: { contentOffset: { y: scrollAnim } } }],
    { useNativeDriver: false }
  )}
  scrollEventThrottle={16}
>

底部CTA 代码 #

<View
  onLayout={(e) => {
    quizSectionY.current = e.nativeEvent.layout.y;
  }}
>
  <Button title="Start Quiz" />
</View>

悬浮按钮 代码 #

{showFloatingQuizBtn && (
  <View style={{ position: "absolute", bottom: 20 }}>
    <Button title="Start Quiz" />
  </View>
)}

已尝试方案 #

• 禁用useNativeDriver
• 切换为手动onScroll处理
• 日志显示y值正常更新，但可见性逻辑似乎存在问题

疑问 #

想了解React Native/Expo新版本中以下方面是否有变化：

• onLayout测量与滚动位置的关系？
• Animated与滚动同步机制？
• ScrollView内元素可见性检测的推荐方式？

内容的提问来源于stack exchange，提问作者jakek05