React Native函数组件使用ref报No overload matches this call如何解决

1. 代码报错的核心原因 #

• 函数式组件不能用React.createRef()，这个API是专门给类组件设计的，函数组件绑定原生/组件ref必须用useRef Hook。
• TypeScript报错是因为你没有给ref指定明确的类型，TS无法识别你当前的ref是绑定到RN的View组件上，类型不匹配就触发了重载不匹配的报错。

2. 无变量赋值ref写法的实际作用 #

ref={React.createRef()}这种写法完全没有实际使用价值：每次组件重渲染都会重新生成一个全新的ref对象，上一次渲染的ref会被直接丢弃，你根本拿不到绑定的组件实例，只是恰好TS没有识别到类型冲突而已，不要用这种写法。

3. 函数式组件ref正确用法 #

首先要从react中导入useRef Hook，同时从react-native导入View类型给ref做泛型标注，参考代码如下：

import React, { useRef } from 'react';
import { View, Text, type ViewProps } from 'react-native';

// 你的组件入参类型定义
type BasicViewProps = {
  txt: string;
  // 其他自定义props
}

export default function BasicView(props: BasicViewProps): JSX.Element {
  // 泛型指定ref绑定的是View组件，初始值设为null
  const basicRef = useRef<View>(null);

  // 演示ref用法：比如点击时获取组件的布局参数
  const handleGetLayout = () => {
    // 访问ref前必须判断current是否存在，组件挂载完成前current是null
    if (basicRef.current) {
      basicRef.current.measure((x, y, width, height, pageX, pageY) => {
        console.log('当前View布局信息：', {x, y, width, height, pageX, pageY});
      });
    }
  }

  return (
    <View
      ref={basicRef}
      style={{
        maxHeight: 100,
        width: 100,
      }}
    >
      <Text onPress={handleGetLayout}>
        {props.txt}
      </Text>
    </View>
  );
}

4. 关键注意事项 #

• useRef返回的对象在组件整个生命周期中保持唯一，不会因为组件重渲染被重置，这是它和createRef最核心的区别。
• 所有对ref.current的操作都要先做非空判断，避免组件未挂载完成时报空指针错误。
• 如果你需要把当前组件的ref暴露给父组件调用，需要配合forwardRef API使用，属于进阶场景可以后续再了解。

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