React Native中如何为measureLayout编写正确的TypeScript类型定义

问题背景 #

页面需要动态计算SVG组件高度，让SVG仅占用下方表单组件的剩余视口空间，保证所有内容完整适配不溢出。实现时给表单组件转发ref，调用measureLayout方法做相对位置测量：

measureLayout(relativeToNativeComponentRef, onSuccess, onFail)：和measure()能力类似，相对于参数指定的祖先组件测量当前视图的尺寸与位置，返回的坐标值均相对于祖先视图的x、y原点。

JS环境下代码运行正常，但TypeScript环境下存在类型不匹配问题：measureLayout第一个参数要求类型为RefObject<number | HostComponent>，但React元素绑定ref时的期望类型为LegacyRef | undefined，虽然运行无异常，但不符合TS类型规范。
首屏加载时测量返回值全为0的问题，已经通过将useLayoutEffect依赖数组从ref对象本身调整为[svgHeightForwardedRef.current, homeScreenContainerRef.current]解决，仅需处理类型定义问题。

解决方案 #

类型定义修正 #

不要手动给容器ref标注number | HostComponent<unknown>这类内部类型，统一使用React.ElementRef<typeof 组件名>获取对应组件的公开实例类型，TS会自动识别该类型兼容measureLayout的参数要求，不会抛出类型错误。
两个ref的正确类型声明：

• 转发给表单组件的ref：表单最终会将ref转发到内部根View，类型声明为useRef<React.ElementRef<typeof View> | null>(null)
• 外层容器组件的ref：绑定在原生View组件上，类型声明和上述保持一致即可

修正后可通过TS校验的完整代码 #

const { height: viewportHeight } = Dimensions.get("window");

export const Home: React.FC<HomeScreenProps> = ({ navigation }) => {
  const [svgHeight, setSvgHeight] = useState(0);
  // 统一使用ElementRef获取组件实例类型，避免类型不匹配
  const svgHeightForwardedRef = useRef<React.ElementRef<typeof View> | null>(null);
  const homeScreenContainerRef = useRef<React.ElementRef<typeof View> | null>(null);
  const dispatch = useAppDispatch();

  const onSumbit = (data: UserMetrics) => {
    const { gender, age } = data;
    dispatch(setUserData(data));
    navigation.navigate("Tests", { gender, age });
  };

  useLayoutEffect(() => {
    if (svgHeightForwardedRef.current && homeScreenContainerRef.current) {
      svgHeightForwardedRef.current.measureLayout(
        homeScreenContainerRef.current,
        (left, top, width, height) => {
          const svgHeightPerPlatform =
            Platform.OS === "web"
              ? viewportHeight - height + top
              : viewportHeight - height - top;
          setSvgHeight(svgHeightPerPlatform);
        },
        () => {
          console.log("measure failed");
        }
      );
    }
  }, [svgHeightForwardedRef.current, homeScreenContainerRef.current]);

  return (
    <View style={styles.container} ref={homeScreenContainerRef}>
      <View style={styles.wrapper}>
        <StatusBar style="auto" />
        <Text style={styles.welcomeText}>Test Reminder</Text>
        <View style={styles.heroWrapper}>
          <HeroSVG
            width={PLATFORM_WIDTH}
            height={svgHeight}
            preserveAspectRatio="xMidYMid meet"
          />
        </View>
        <HealthCheckForm onSubmit={onSumbit} ref={svgHeightForwardedRef} />
      </View>
    </View>
  );
};

兼容说明 #

• 如果使用0.72以下版本的React Native，仍存在类型报错时，可以给传入measureLayout的参数包裹findNodeHandle处理，写法为measureLayout(findNodeHandle(homeScreenContainerRef.current), ...)，新版本RN无需该兼容处理
• 当前调整的useLayoutEffect依赖项已经可以解决首屏测量值为0的问题，无需额外改动

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