React Native 自动填充以及电子邮件和密码输入的建议

Sof*_*fia 6 react-native

我正在使用 React Native 0.63.4,我的目标是让自动填充在 Android 和 iOS 上工作:

  • 获取电子邮件建议(例如,在注册时填写电子邮件输入时以及首次登录时)
  • 成功登录后要求保存密码
  • 再次登录时获取保存的凭据

这是我用于输入的组件:


const InputField: React.FC<Props> = ({
  placeholder,
  onTextChange,
  keyboardType = "default",
  securedTextEntry,
  isMissing,
  textContentType = "none",
  autoCompleteType = "off"
}) => {

  const [thisSecureTextEntry, setThisSecureTextEntry] = useState(false);

  const isAutoCapitalizeDisabled =
    keyboardType === 'email-address' || 'password' ? 'none' : 'sentences';

  const importantForAutofill = autoCompleteType ? 'yes' : 'no';
  

  const updateThisSecureTextEntry = (value: boolean) => {
    if(securedTextEntry) {
      setThisSecureTextEntry(value);
    }
  }

  return (
    Platform.OS === 'ios' ?
        <TextInput
          style={styles.text}
          placeholder={placeholder}
          placeholderTextColor={isMissing ? ERROR_TEXT : PLACEHOLDER_GRAY}
          onChangeText={onTextChange}
          onFocus={() => updateThisSecureTextEntry(true)}
          onBlur={() => updateThisSecureTextEntry(true)}
          secureTextEntry={thisSecureTextEntry}
          keyboardType={keyboardType}
          autoCapitalize={isAutoCapitalizeDisabled}
          
          textContentType={textContentType}
        /> : 
        <TextInput
          style={styles.text}
          placeholder={placeholder}
          placeholderTextColor={isMissing ? ERROR_TEXT : PLACEHOLDER_GRAY}
          onChangeText={onTextChange}
          onFocus={() => updateThisSecureTextEntry(true)}
          onBlur={() => updateThisSecureTextEntry(true)}
          secureTextEntry={thisSecureTextEntry}
          keyboardType={keyboardType}
          autoCapitalize={isAutoCapitalizeDisabled}
          
          autoCompleteType={autoCompleteType}
          importantForAutofill={importantForAutofill}
        />
  );
};

export default InputField;
Run Code Online (Sandbox Code Playgroud)

以下是我如何使用它进行登录:

<InputField
          placeholder={translations.EMAIL}
          onTextChange={setEmail}
          keyboardType={'email-address'}
          autoCompleteType={'username'}
          textContentType={'username'}
        />
        <InputField
          placeholder={translations.PASSWORD}
          onTextChange={setPassword}
          securedTextEntry={true}
          autoCompleteType={'password'}
          textContentType={'password'}
        />
Run Code Online (Sandbox Code Playgroud)
  • 我必须维护 的状态secureTextEntry并更改值onFocus,并onBlur在 iOS 上正确获取电子邮件建议(链接

iOS 问题:如果我设置textContentTypeusername,系统会要求我在 iOS 上保存密码,但在我第一次填写登录信息时没有收到电子邮件建议。如果我将其设置为emailAddress,我会收到建议,但不会要求我保存密码。

Android问题:即使使用autoCompleteTypeimportantForAutofill设置,我也从未被要求保存密码。

我尝试向 AndroidManifest.xml 添加权限,<uses-permission android:name="android.permission.BIND_AUTOFILL_SERVICE" />但没有任何区别。

我在我使用的两个设备(android 和 ios)的设置上启用了自动填充。

有人对如何解决这个问题有建议吗?谢谢。