iOS上Reanimated ScrollView嵌套时contentOffset动画禁用手势求助

问题背景 #

iOS平台下，嵌套在原生垂直ScrollView内的Reanimated Animated.ScrollView，当通过withTiming/withSpring类动画控制contentOffset属性时，动画运行期间该Animated.ScrollView的所有触摸手势（包括触摸事件）会被完全禁用；取消动画后触摸功能恢复正常，Android平台无此异常。

使用的核心依赖版本：

"expo": "^51.0.18",
"expo-router": "~3.5.17",
"react-native-gesture-handler": "~2.16.1",
"react-native-reanimated": "~3.10.1"

代码结构：外层为原生垂直ScrollView，内部包含带有水平滚动动画的Animated.ScrollView，动画通过useAnimatedProps绑定contentOffset实现，且设置了onTouchStart事件用于取消动画。

解决方案 #

方案1：替换外层原生ScrollView为react-native-gesture-handler的ScrollView #

原生ScrollView与Reanimated的手势处理在iOS上存在兼容性冲突，改用Gesture Handler提供的ScrollView可优化嵌套手势的响应逻辑。

修改外层容器代码：

import { ScrollView } from 'react-native-gesture-handler';

// 替换原原生ScrollView
<ScrollView style={styles.container} showsVerticalScrollIndicator={false}>
  ...其他组件
  <ComponentWithScrollViewInside />
</ScrollView>

注：确保应用根组件已包裹在GestureHandlerRootView中（当前_layout.tsx已满足此要求）。

方案2：手动控制手势响应优先级 #

通过GestureDetector包裹内部Animated.ScrollView，利用Gesture Handler的手势系统优先响应内部触摸事件，避免动画期间手势被外层ScrollView拦截。

示例代码：

import { GestureDetector, TapGesture } from 'react-native-gesture-handler';
import { runOnJS } from 'react-native-reanimated';

const cancelScrollAnimation = () => {
  cancelAnimation(offsetX);
};

// 创建触摸手势，优先响应内部触摸
const tapGesture = TapGesture()
  .onStart(() => {
    runOnJS(cancelScrollAnimation)();
  });

// 用GestureDetector包裹Animated.ScrollView
<GestureDetector gesture={tapGesture}>
  <Animated.ScrollView
    animatedProps={animatedProps}
    horizontal
    showsHorizontalScrollIndicator={false}
  >
    ...滚动内容
  </Animated.ScrollView>
</GestureDetector>

可额外配合外层ScrollView的滚动状态控制，进一步优化体验：

import { useState } from 'react';
import { ScrollView as NativeScrollView } from 'react-native';

const [innerScrollActive, setInnerScrollActive] = useState(false);

// 外层原生ScrollView添加滚动控制
<NativeScrollView 
  style={styles.container} 
  showsVerticalScrollIndicator={false}
  scrollEnabled={!innerScrollActive}
>
  ...其他组件
  <ComponentWithScrollViewInside 
    onTouchStart={() => setInnerScrollActive(true)}
    onTouchEnd={() => setInnerScrollActive(false)}
  />
</NativeScrollView>

方案3：改用scrollTo方法驱动动画 #

避免直接通过animatedProps绑定contentOffset，改为监听动画值变化，手动调用scrollTo方法控制滚动位置，绕过contentOffset动画导致的手势拦截问题。

示例代码：

import { useRef } from 'react';
import { useAnimatedReaction } from 'react-native-reanimated';

const offsetX = useSharedValue<number>(0);
const scrollRef = useRef<Animated.ScrollView>(null);

useEffect(() => {
  const animation = withRepeat(
    withTiming(getOffsetXEndPosition(), { duration: 25000, easing: Easing.linear }),
    -1,
    true
  );
  return () => cancelAnimation(animation);
}, [xxx]);

// 监听动画值变化，调用scrollTo更新滚动位置
useAnimatedReaction(
  () => offsetX.value,
  (newValue) => {
    scrollRef.current?.scrollTo({ x: newValue, animated: false });
  },
  [xxx]
);

// 移除animatedProps，使用ref控制滚动
<Animated.ScrollView
  ref={scrollRef}
  onTouchStart={() => cancelAnimation(offsetX)}
  horizontal
  showsHorizontalScrollIndicator={false}
>
  ...滚动内容
</Animated.ScrollView>

方案选择建议 #

• 优先尝试方案1，实现成本最低，兼容性最优；
• 若无法替换外层ScrollView，可尝试方案3，通过改变动画实现逻辑规避问题；
• 需要精细控制多手势交互场景时，选择方案2。

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