react-native-phone-input(1.0.10)未触发blur回调引发Formik表单验证异常

我完全懂你现在的困扰——react-native-phone-input组件没法触发Formik的blur回调，导致清空手机号切换到其他字段时，必填错误提示迟迟不出现。核心问题在于这个组件没有直接暴露onBlur属性，得通过它的textProps把blur事件传递给内部的输入框。下面是具体的解决方案：

步骤1：给PhoneInput绑定Blur事件 #

修改你的手机号输入字段代码，在textProps里添加onBlur，绑定Formik的handleBlur('phoneNumber')：

<PhoneInput
  ref={ref => { phone = ref; }}
  textStyle={{fontWeight: 'bold'}}
  style={{marginHorizontal: 10}}
  autoFormat={true}
  onChangePhoneNumber={e => {
    setFieldValue('phoneNumber', e);
    // 把邮箱的清空和错误清除逻辑单独提取，避免setFieldValue参数混乱
    setFieldValue('email', '');
    setFieldError('email', '');
  }}
  onSelectCountry={data => onSelectCountry(data)}
  value={values.phoneNumber}
  initialCountry={countryData.cca2.toLowerCase()}
  textProps={{
    placeholder: 'Telephone number',
    // 关键：通过textProps给内部输入框绑定blur事件
    onBlur: handleBlur('phoneNumber')
  }}
  onPressFlag={onPressFlag}
/>

这里要注意：你之前在setFieldValue里的写法有问题，第三个参数是回调函数，但你直接写了表达式，这不会按预期执行。把邮箱相关的操作单独写出来，状态更新会更可靠。

步骤2：修正Yup验证规则的语法错误 #

你的SignupSchema末尾多了一个['email', 'phoneNumber']，这属于冗余语法，会干扰验证逻辑，直接去掉：

const SignupSchema = Yup.object().shape({
  email: Yup.string().when('phoneNumber', {
    is: phoneNumber => !phoneNumber || phoneNumber.length === 0,
    then: Yup.string()
      .email('Please enter a valid email address')
      .matches(emailRegExp, 'Please enter a valid email address')
      .required('Email is required'),
  }),
  phoneNumber: Yup.string().when('email', {
    is: email => !email || email.length === 0,
    then: Yup.string()
      // .matches(phoneRegExp, 'Phone number is not valid')
      .required('Mobile number is required')
      .max(20, 'Mobile number is too long'),
  })
});

步骤3：添加手机号字段的错误提示 #

别忘记给手机号字段加上和邮箱一致的错误提示组件：

{errors.phoneNumber && touched.phoneNumber && (
  <Text style={styles.commonErrorText}>{errors.phoneNumber}</Text>
)}

为什么这样能解决问题？ #

• PhoneInput的输入框是内部封装的，必须通过textProps传递事件，绑定handleBlur('phoneNumber')后，输入框失去焦点时会标记touched.phoneNumber为true，触发Yup的验证逻辑。
• 修正setFieldValue的用法后，状态更新逻辑更清晰，避免了意外的bug。
• 去掉冗余的数组语法，保证Yup的验证规则能正常解析执行。

这样修改后，当你清空手机号并切换到其他字段时，PhoneInput的blur事件会触发Formik的handleBlur，标记该字段为已触碰，Yup会立即重新验证并显示必填错误提示。

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