如何让Expo开发的应用触发安卓/iOS保存密码提示实现自动填充

1. 输入框基础属性配置 #

这是触发系统识别的核心前提，需要给邮箱/用户名、密码输入框设置对应的语义化属性：

• 邮箱/用户名输入框：
  • iOS端设置textContentType属性，取值为emailAddress（邮箱）或username（用户名）
  • 安卓端设置autoComplete属性，取值为email（邮箱）或username（用户名）
• 密码输入框：
  • iOS端设置textContentType属性，登录场景取password，注册设置新密码场景取newPassword
  • 安卓端设置autoComplete属性，登录场景取password，注册设置新密码场景取newPassword

示例代码：

import { useState } from 'react';
import { TextInput, Button, View } from 'react-native';

export default function LoginForm() {
  const [account, setAccount] = useState('');
  const [password, setPassword] = useState('');

  const submitLogin = () => {
    // 执行登录请求逻辑，确认登录成功后再执行页面跳转
    // 不要在请求未完成前提前跳转，会导致系统无法触发保存弹窗
  };

  return (
    <View>
      {/* 邮箱输入框 */}
      <TextInput
        value={account}
        onChangeText={setAccount}
        keyboardType="email-address"
        textContentType="emailAddress"
        autoComplete="email"
        placeholder="请输入邮箱"
      />
      {/* 密码输入框 */}
      <TextInput
        value={password}
        onChangeText={setPassword}
        secureTextEntry
        textContentType="password"
        autoComplete="password"
        placeholder="请输入密码"
      />
      <Button title="登录" onPress={submitLogin} />
    </View>
  );
}

2. 应用配置补充 #

需要在app.json中添加对应平台的关联配置，证明应用和你的业务域名归属一致：

iOS端配置 #

在app.json的expo.ios.associatedDomains数组中添加如下条目，替换为你的业务域名：

{
  "expo": {
    "ios": {
      "associatedDomains": ["webcredentials:your-domain.com"]
    }
  }
}

同时需要在你的业务域名根目录下放apple-app-site-association文件，完成应用和域名的关联验证。

安卓端配置 #

在app.json的expo.android.intentFilters中添加App Links配置，关联你的业务域名，同时在域名根目录下放.well-known/assetlinks.json文件完成归属验证。

3. 注意事项 #

• 必须由用户主动点击登录按钮提交表单，代码自动触发的提交操作不会触发系统保存密码弹窗
• 测试时不要使用Expo Go测试关联域名相关的自动填充能力，Expo Go的固定包名无法匹配你的域名关联配置，需要打自定义开发客户端（Dev Client）或正式安装包测试
• 登录成功后不要立即销毁登录页组件，等待1-2秒再执行页面跳转，给系统预留识别弹窗的时间

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