React Native iOS端切换密码可见性时键盘闪烁、自动填充建议重复出现的问题求助

我最近在React Native中使用标准的TextInput组件开发登录界面，在iOS平台遇到了一个很影响用户体验的问题：
当用户点击眼睛图标切换密码可见性（也就是切换secureTextEntry的开关状态）时，键盘会短暂隐藏后重新弹出，同时iCloud钥匙串的自动填充栏也会再次出现。尤其是在界面外层包裹KeyboardAvoidingView的情况下，整个屏幕会出现明显的视觉闪烁，布局也会发生跳动。

更糟的是，只要触发过一次自动填充操作，哪怕只是在用户名和密码输入框之间切换焦点，这个问题也会出现。而Android平台上完全没有这类现象，看起来这是和iOS的键盘、自动填充机制强绑定的问题。

最小复现代码 #

import { useState } from "react";
import {
  KeyboardAvoidingView,
  Platform,
  StyleSheet,
  Text,
  TextInput,
  TouchableOpacity,
  View,
} from "react-native";
import { Feather } from "@expo/vector-icons";

export default function App() {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [showPassword, setShowPassword] = useState(false);

  return (
    <KeyboardAvoidingView
      style={styles.container}
      behavior={Platform.OS === "ios" ? "padding" : undefined}
    >
      <View style={styles.row}>
        <Text>Username</Text>
        <TextInput
          style={styles.input}
          value={username}
          onChangeText={setUsername}
          autoCapitalize="none"
          autoCorrect={false}
          keyboardType="email-address"
          autoComplete="username"
          textContentType="username"
        />
      </View>
      <View style={styles.row}>
        <Text>Password</Text>
        <View style={styles.inputWrapper}>
          <TextInput
            style={styles.input}
            value={password}
            onChangeText={setPassword}
            secureTextEntry={!showPassword}
            autoCapitalize="none"
            autoCorrect={false}
            autoComplete="current-password"
            textContentType="password"
          />
          <TouchableOpacity
            onPress={() => setShowPassword((prev) => !prev)}
            style={styles.icon}
          >
            <Feather
              name={showPassword ? "eye-off" : "eye"}
              size={20}
              color="gray"
            />
          </TouchableOpacity>
        </View>
      </View>
    </KeyboardAvoidingView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    padding: 20
  },
  row: {
    marginBottom: 20
  },
  input: {
    borderWidth: 1,
    borderColor: "#ccc",
    padding: 10,
    borderRadius: 6,
  },
  inputWrapper: {
    position: "relative"
  },
  icon: {
    position: "absolute",
    right: 10,
    top: 10
  },
});

我尝试过的解决方法（均无效） #

• 给输入框设置autoComplete="off"和textContentType="none"，但iOS依然会显示钥匙串的自动填充栏
• 尝试渲染两个独立的TextInput组件（一个开启secureTextEntry，一个关闭），通过状态切换显示，但闪烁问题反而变得更严重
• 完全移除了KeyboardAvoidingView，改为手动管理键盘适配，问题依然没有改善

期望的效果 #

• 切换密码可见性时，键盘保持稳定，不会出现隐藏再弹出的情况
• 用户关闭钥匙串自动填充栏后，该栏保持隐藏状态，不会反复出现
• 在输入框之间切换焦点时，界面不会出现闪烁或布局跳动的现象

内容来源于stack exchange