React Native中useRef绑定View时报Object is possibly null的正确类型定义

正确写法 #

首先从react-native引入对应组件，使用React.ElementRef推导组件实例类型即可：

import { Animated } from 'react-native';
import React, { useRef, useLayoutEffect } from 'react';

const Component = () => {
  // 核心类型定义
  const ref = useRef<React.ElementRef<typeof Animated.View>>(null);

  useLayoutEffect(()=>{
    // 加非空判断即可消除 null 报错
    if (ref.current) {
      // 注意：React Native 没有 Web 端的 clientHeight 属性，获取元素尺寸请用 measure 方法
      ref.current.measure((x, y, width, height) => {
        console.log('元素高度', height);
      });
    }
  },[]);

  return (
    <Animated.View ref={ref} style={{height: 100}}></Animated.View>
  );
}

额外说明 #

• 如果是给普通的非动画View绑定ref，泛型改为React.ElementRef<typeof View>即可，该写法对所有React Native内置组件通用，无需记忆额外的实例类型名。
• 如果你确认组件挂载后ref一定有值（符合useLayoutEffect的执行时机特性），也可以用非空断言!简写：ref.current!.measure(...)，不过优先推荐if判断，安全性更高。

之前写法报错的原因 #

• React.FunctionComponent、React.ReactElement是组件本身的类型，不是组件渲染后的实例类型，无法匹配元素实例的属性。
• 未给useRef指定泛型时，TS会根据初始值null推导ref类型为MutableRefObject<null>，此时current永远被识别为null，访问属性会报never类型错误。

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