React Native Formik表单refs始终为空，无法切换输入框焦点求助

这个问题的核心是自定义组件没有正确转发Ref到内部的输入元素，导致你外部创建的ref拿到的是InputWithMessage组件的实例，而不是里面的TextField，自然调用不了focus()方法。下面是具体的解决步骤：

1. 用React.forwardRef重构自定义组件 #

React.forwardRef的作用就是帮你把外部传入的ref转发到组件内部的指定元素上。修改你的InputWithMessage组件：

// 用forwardRef包裹组件，ref作为第二个参数接收
const InputWithMessage = React.forwardRef(({ label, formikProps, formikKey, ...rest }, ref) => { 
  // 不要直接修改全局styles对象（会污染其他组件的样式），改用动态样式
  const hasError = formikProps.touched[formikKey] && formikProps.errors[formikKey];
  const inputStyles = {
    ...styles.inputStyles,
    borderColor: hasError ? 'red' : styles.inputStyles.borderColor
  };

  return ( 
    <View style={inputStyles}> 
      <TextField 
        lineWidth={0} 
        activeLineWidth={0} 
        style={styles.textFieldStyles} 
        label={label} 
        ref={ref} // 把外部传入的ref绑定到TextField上
        tintColor={hasError ? colors.red : colors.primary} 
        onChangeText={e => formikProps.setFieldValue(formikKey, e)} 
        onBlur={formikProps.handleBlur(formikKey)} 
        {...rest} /> 
      {/* 这里保留你原来的错误提示Text */}
    </View> 
  )
});

2. 为什么原来的Ref为空？ #

你之前直接给InputWithMessage传ref，但默认情况下，自定义组件不会把ref传递给内部子元素。forwardRef就是专门解决这个问题的API——它让外部的ref能直接指向你组件内部的TextField，这样this.birthName.current就能拿到TextField的实例，调用focus()就正常了。

3. 额外优化：避免直接修改全局样式 #

你原来代码里styles.inputStyles.borderColor = 'red'的写法有问题，因为StyleSheet.create创建的样式对象是不可变的，直接修改会导致所有使用styles.inputStyles的组件都变成红色边框。上面的代码用扩展运算符动态合并样式，既实现了错误状态的样式变化，又不会污染全局样式。

修改后，你原来的外部调用代码不需要改动，onSubmitEditing={() => { this.birthName.current.focus() }}就能正常触发焦点切换了。

内容的提问来源于stack exchange，提问作者E.D