React Native + TypeScript表单焦点跳转时Ref类型错误解决方案咨询

嘿，这个问题我之前也碰到过！本质是TypeScript不知道你的ref指向的是什么类型的组件实例，所以才会抛出那些null或者never的错误。咱们一步步来解决：

第一步：确保自定义组件NamedTextInput能传递ref #

因为你用的是自定义组件，React默认不会把ref传递给内部的原生组件，所以得用forwardRef来让父组件能拿到内部TextInput的ref。修改你的NamedTextInput组件：

import React, { forwardRef, ForwardedRef } from 'react';
import { TextInput, TextInputProps } from 'react-native';

// 定义组件的props，加上你的name属性
type NamedTextInputProps = TextInputProps & {
  name: string;
};

// 用forwardRef把内部TextInput的ref暴露给父组件
const NamedTextInput = forwardRef((props: NamedTextInputProps, ref: ForwardedRef<TextInput>) => {
  return <TextInput {...props} ref={ref} />;
});

export default NamedTextInput;

第二步：在父组件中正确定义ref的类型 #

之前你没给ref指定具体类型，TypeScript只能推断它是MutableRefObject<null>，自然会担心current为null。现在明确指定ref的类型为TextInput：

import React, { useRef } from 'react';
import { TextInput } from 'react-native';
import NamedTextInput from './NamedTextInput';

const YourFormComponent = () => {
  // 明确告诉TS：这个ref指向的是TextInput实例，初始为null
  const emailRef = useRef<TextInput>(null);
  const passwordRef = useRef<TextInput>(null);

  return (
    <>
      <NamedTextInput
        name={'email'}
        ref={emailRef}
        onSubmitEditing={() => {
          // 用可选链?.安全调用focus，避免current为null的情况
          passwordRef.current?.focus();
        }}
        // 建议加上这个属性，让键盘显示"下一个"按钮，用户体验更好
        returnKeyType="next"
      />
      <NamedTextInput
        name={'password'}
        ref={passwordRef}
        returnKeyType="done"
      />
    </>
  );
};

export default YourFormComponent;

为什么之前会出错？ #

• 你之前的ref没指定类型，TS默认认为它是MutableRefObject<null>，所以会提示Object is possibly 'null'。
• 当你加!或?后，因为TS不知道current的具体类型，只能推断为never，所以又会报错Property 'focus' does not exist on type 'never'。

现在这样修改后，TypeScript明确知道ref的current是TextInput|null，用?.调用focus既安全又符合TS的类型检查要求。如果你的NamedTextInput不是封装原生TextInput，而是自己实现的组件，那只要确保组件实例上有focus方法，然后把ref的类型换成你的组件类型就行啦。

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