React Native Expo iOS注册页自动填充密码选自定义后内容清空但state未更新

这个问题是iOS系统密码自动填充机制的特有表现：当用户在密码输入框选择「自行设置密码」选项时，系统会直接清空输入框的展示内容，但不会触发React Native TextInput 组件默认的onChangeText回调，导致Formik无法收到值更新通知，内部维护的state和视图展示出现不一致。

下面给出多个可落地的修复方案，可根据自身场景选择：

方案1：从根源关闭密码建议弹窗 #

给两个密码输入框显式设置textContentType属性，告诉系统当前输入框的用途，直接阻止不必要的密码建议弹窗弹出：

• 注册场景可设置为newPassword，引导系统给出合规的新密码建议，避免误触发清空逻辑
• 不需要密码建议的场景可直接设置为none，完全关闭相关弹窗

方案2：补充系统级修改的事件监听 #

iOS系统对输入框的修改会触发onChange事件而非仅onChangeText，补充该事件的监听手动同步值到Formik即可。setFieldValue是Formik内置的方法，可直接从Formik实例中获取：

// 密码输入框新增
onChange={e => {
  const inputText = e.nativeEvent.text;
  setFieldValue('password', inputText);
}}
// 确认密码输入框同理
onChange={e => {
  const inputText = e.nativeEvent.text;
  setFieldValue('confirmPassword', inputText);
}}

方案3：失焦时兜底同步 #

如果仍有偶现不一致的情况，可以在输入框失焦时做一次兜底同步，确保视图和state完全对齐：

// 密码输入框新增
onBlur={() => {
  handleBlur('password')();
  const currentValue = passwordRef.current?.value || '';
  setFieldValue('password', currentValue);
}}
// 确认密码输入框同理
onBlur={() => {
  handleBlur('confirmPassword')();
  const currentValue = confirmPasswordRef.current?.value || '';
  setFieldValue('confirmPassword', currentValue);
}}

<View style={styles.inputFieldContainer}>
  <CustomText size={14}>Password</CustomText>
  <View style={styles.inputField}>
    <TextInput
      autoCapitalize='none'
      autoCorrect={false}
      blurOnSubmit={true}
      keyboardType='default'
      maxLength={20}
      onChangeText={handleChange('password')}
      // 新增配置
      textContentType='newPassword'
      onChange={e => setFieldValue('password', e.nativeEvent.text)}
      onBlur={() => {
        handleBlur('password')();
        const currentVal = passwordRef.current?.value || '';
        setFieldValue('password', currentVal);
      }}
      ref={passwordRef}
      secureTextEntry={true}
      selectionColor={Colors.primary}
      style={styles.textInput}
      value={values.password}
      onSubmitEditing={() => {
        confirmPasswordRef.current.focus();
      }}
    />
  </View>
</View>
<View style={styles.inputFieldContainer}>
  <CustomText size={14}>Confirm password</CustomText>
  <View style={styles.inputField}>
    <TextInput
      autoCapitalize='none'
      autoCorrect={false}
      blurOnSubmit={true}
      keyboardType='default'
      maxLength={20}
      onChangeText={handleChange('confirmPassword')}
      // 新增配置
      textContentType='newPassword'
      onChange={e => setFieldValue('confirmPassword', e.nativeEvent.text)}
      onBlur={() => {
        handleBlur('confirmPassword')();
        const currentVal = confirmPasswordRef.current?.value || '';
        setFieldValue('confirmPassword', currentVal);
      }}
      ref={confirmPasswordRef}
      secureTextEntry={true}
      selectionColor={Colors.primary}
      style={styles.textInput}
      value={values.confirmPassword}
      onSubmitEditing={() => {
        if (allValid) handleSubmit();
      }}
    />
  </View>
</View>

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