React Native中forwardRef的TypeScript报错问题求助

这个问题的核心是TypeScript对ForwardedRef的类型校验逻辑：它可能是一个可变引用对象（MutableRefObject），也可能是一个回调函数，直接访问.current会让TS无法确定它的具体类型，从而抛出错误。下面是几种优雅的解决办法：

方案一：用类型守卫明确Ref类型 #

在Slide组件的点击事件里，先通过类型守卫判断ref是否为MutableRefObject，再访问.current：

<TouchableOpacity onPress={() => {
  // 类型守卫：判断ref是否包含current属性（即是否为MutableRefObject）
  if ('current' in ref && ref.current) {
    // 此时TS会确认ref是MutableRefObject，可以安全访问current
    ref.current.scrollTo({ x: width * (index + 1), y: 0, animated: true });
    // 注意：新版React Native中，Animated.ScrollView的ref.current无需调用getNode()，直接调用scrollTo即可
  }
}}>
  <Text>heyy</Text>
</TouchableOpacity>

方案二：封装工具函数统一处理Ref #

可以写一个小工具函数，帮你自动处理ForwardedRef的两种类型情况，避免重复写判断逻辑：

// 工具函数：安全获取ForwardedRef的current值
function getRefCurrent<T>(ref: React.ForwardedRef<T>): T | null {
  if (typeof ref === 'function') {
    // 如果是回调式ref，你的场景里用不到，直接返回null即可
    return null;
  }
  return ref?.current ?? null;
}

// 在组件中使用
<TouchableOpacity onPress={() => {
  const scrollView = getRefCurrent(ref);
  scrollView?.scrollTo({ x: width * (index + 1), y: 0, animated: true });
}}>
  <Text>heyy</Text>
</TouchableOpacity>

额外的细节优化 #

除了解决ref报错，你的代码还有两个小问题可以一并修正：

1. onScroll函数写法错误：
   原来的代码没有实际调用Animated.event生成的处理函数，导致scrollX不会被更新，改成这样：

   const onScroll = Animated.event(
     [{ nativeEvent: { contentOffset: { x: scrollX } } }],
     { useNativeDriver: false } // 根据需求选择是否启用原生驱动
   );
   

2. Animated.Value类型标注错误：
   Animated.Value<0>是不规范的写法，应该标注为数字类型：

   // Onboarding组件中
   const scrollX = new Animated.Value(0);
   // SlideProps接口中
   scrollX: Animated.Value<number>;
   

内容的提问来源于stack exchange，提问作者Oğulcan Karayel