如何使用Expo SecureStore存储凭证并自动填充登录邮箱与密码字段

你要实现点击任意输入框填充已存储到SecureStore的凭证，只需要补充凭证读取和赋值逻辑即可，具体实现如下：

实现步骤 #

1. 新增凭证读取方法
   首先封装一个统一读取存储凭证并赋值给输入框绑定状态的方法，在组件内添加如下代码：

const loadSavedCredentials = async () => {
  try {
    // 仅当两个输入框均为空时才触发填充，避免覆盖用户正在输入的内容
    if (localState.inputValues.email || localState.inputValues.password) {
      return
    }
    const savedEmail = await SecureStore.getItemAsync('emailAddress')
    const savedPwd = await SecureStore.getItemAsync('password')
    if (savedEmail && savedPwd) {
      inputChangeHandler('email', savedEmail)
      inputChangeHandler('password', savedPwd)
    }
  } catch (e) {
    console.log('凭证读取失败', e)
  }
}

2. 绑定输入框聚焦事件
   将上述方法分别添加到邮箱、密码输入框的onFocus回调中：

• 邮箱输入框修改：

onFocus={() => {
  setEmailSelected(true)
  loadSavedCredentials()
}}

• 密码输入框修改：

onFocus={() => {
  setPwSelected(true)
  loadSavedCredentials()
}}

系统自动填充兼容说明 #

你已经添加的textContentType和autoComplete属性是正确的，这两个属性是给系统级密码管理器（iOS钥匙串、Android自动填充服务）识别字段用的，和你自己用SecureStore实现的自定义填充互不冲突，保留即可。
如果需要让系统密码管理器也能识别你存储的凭证，可以在app.json中补充对应平台的配置：

• iOS端添加associatedDomains配置关联你的站点域名
• Android端添加autoFillEnabled配置开启自动填充服务

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