React Native&TS报错：RefObject<TextInput>类型不存在focus属性

问题复现 #

• 原ref声明写法：

declare passCodeInput: React.RefObject<TextInput>;

• 初始错误调用（直接在ref对象上调方法，触发类型报错）：

setTimeout(() => this.passCodeInput.focus());

• 调整为this.passCodeInput.current!.focus()写法后，TS类型报错消失，但实际运行时focus仍无法正常触发。

根因分析 #

1. 类型报错的直接原因：RefObject的实例方法全部挂载在current属性指向的原生组件实例上，直接在ref对象顶层调用方法不符合Ref对象的结构定义，必然触发TS类型校验错误。
2. 加current后仍不生效的核心原因：
   • 仅用declare做类型声明，没有实际调用React.createRef初始化ref实例，运行时passCodeInput本身为undefined，非空断言!仅能跳过TS类型检查，不会改变运行时的空值状态。
   • 初始化了ref但没有将其绑定到目标TextInput组件的ref属性上，导致current始终为null。
   • 调用focus的时机过早，TextInput组件还未完成挂载/渲染（常见于弹窗弹出、页面跳转刚触发的瞬间调用），此时节点还未挂载到原生层，调用方法无响应。

修复步骤 #

1. 正确初始化ref实例
   类组件中不要仅用declare声明类型，直接在类属性位置初始化带泛型的ref：

   // 删除单独的declare声明，直接初始化ref
   passCodeInput = React.createRef<TextInput>();
   

   如果是函数组件场景，使用useRef时必须传入null作为初始值：

   const passCodeInput = useRef<TextInput>(null);
   

2. 将ref绑定到目标TextInput
   渲染TextInput组件时，必须把创建好的ref实例传给组件的ref属性，否则ref无法拿到组件实例：

   <TextInput
     ref={this.passCodeInput /* 函数组件直接传passCodeInput即可 */}
     // 其余业务属性，比如placeholder、onChangeText等
   />
   

3. 安全调用focus方法，兼容时序问题
   调用时不要直接用非空断言硬写，先做可选链判空，如果是弹窗、页面入场场景，适当调整setTimeout延迟，等组件完成渲染后再调用：

   // 普通场景延迟0ms即可，弹窗/动画场景可以调整为100-200ms
   setTimeout(() => {
     this.passCodeInput.current?.focus();
   }, 100);
   

避坑提示：如果是结合自定义组件、动画组件、Modal组件使用，要注意ref是否被中间组件拦截转发，若TextInput被包裹在自定义组件内，需要用React.forwardRef把ref透传到内部的TextInput节点上，否则外层拿到的ref会是自定义组件实例，不存在focus方法。

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