如何让React Native应用实现用户凭据建议功能？

一、利用系统内置凭据提示（快速方案） #

React Native的TextInput支持与系统凭据管理器联动，自动唤起已保存的账号建议：

• iOS：设置textContentType="username"/"password"，同时开启autocomplete="username"，系统会自动展示已存储的账号列表，点击后自动填充表单。
• Android：设置autocompleteType="username"/"password"，同样能触发系统级的凭据建议。

但这种方式是系统主导，无法自定义UI样式或精确控制账号展示逻辑，适合快速实现基础需求。

二、自定义多账号建议组件（核心实现，匹配PayPal效果） #

如果需要完全自定义账号列表的展示、交互逻辑，可按以下步骤实现：

1. 安全存储用户凭据 #

使用react-native-keychain（替代明文存储的AsyncStorage）保存多账号信息，确保数据安全：

import * as Keychain from 'react-native-keychain';

// 保存单个账号（自动去重）
const saveAccount = async (username, password) => {
  const existingAccounts = await getSavedAccounts();
  const updatedAccounts = [
    ...existingAccounts.filter(acc => acc.username !== username),
    { username, password }
  ];
  await Keychain.setGenericPassword(
    'app-saved-accounts',
    JSON.stringify(updatedAccounts),
    { accessible: Keychain.ACCESSIBLE.WHEN_UNLOCKED }
  );
};

// 获取所有已保存账号
const getSavedAccounts = async () => {
  const credentials = await Keychain.getGenericPassword();
  return credentials ? JSON.parse(credentials.password) : [];
};

2. 构建账号建议弹窗 #

在登录页面的用户名输入框下方，添加自定义下拉列表，点击账号自动填充表单：

import { View, TextInput, FlatList, TouchableOpacity, Text, StyleSheet } from 'react-native';
import { useState, useEffect } from 'react';

const LoginScreen = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [savedAccounts, setSavedAccounts] = useState([]);
  const [showSuggestions, setShowSuggestions] = useState(false);

  useEffect(() => {
    const fetchAccounts = async () => {
      const accounts = await getSavedAccounts();
      setSavedAccounts(accounts);
    };
    fetchAccounts();
  }, []);

  const handleAccountSelect = (account) => {
    setUsername(account.username);
    setPassword(account.password);
    setShowSuggestions(false);
  };

  return (
    <View style={styles.container}>
      <TextInput
        placeholder="邮箱/手机号"
        value={username}
        onChangeText={setUsername}
        onFocus={() => savedAccounts.length > 0 && setShowSuggestions(true)}
        style={styles.input}
      />
      <TextInput
        placeholder="密码"
        value={password}
        onChangeText={setPassword}
        secureTextEntry
        style={styles.input}
      />

      {showSuggestions && (
        <View style={styles.suggestionBox}>
          <FlatList
            data={savedAccounts}
            keyExtractor={item => item.username}
            renderItem={({ item }) => (
              <TouchableOpacity
                onPress={() => handleAccountSelect(item)}
                style={styles.suggestionItem}
              >
                <Text>{item.username}</Text>
              </TouchableOpacity>
            )}
          />
        </View>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: { padding: 20, marginTop: 50 },
  input: { borderWidth: 1, borderColor: '#ddd', padding: 12, borderRadius: 8, marginBottom: 15 },
  suggestionBox: {
    position: 'absolute',
    top: 100,
    left: 20,
    right: 20,
    backgroundColor: '#fff',
    borderRadius: 8,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3
  },
  suggestionItem: { padding: 15, borderBottomWidth: 1, borderBottomColor: '#f0f0f0' }
});

3. 安全优化建议 #

• 避免明文存储密码：可仅保存用户名和登录令牌（如JWT），下次登录时直接用令牌验证，无需填充密码。
• 添加生物识别验证：如果需要更高安全性，可结合react-native-biometrics，验证指纹/面容后再加载账号列表。

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