React Native iOS端TextInput邮箱自动填充与secureTextEntry冲突

iOS端登录、注册表单中，要求邮箱输入框可弹出系统自带的邮箱自动补全建议，当前使用的邮箱字段TextInput代码如下：

<TextInput
        style={styles.text}
        placeholder={placeholder}
        textContentType={'emailAdress'}
        placeholderTextColor={PLACEHOLDER_GRAY}
        onChangeText={onTextChange}
        keyboardType={'email-address'}
        autoCorrect={true}
        autoCapitalize={'none'}
/>

实际运行存在属性冲突：当页面内没有设置secureTextEntry属性的TextInput时，邮箱自动填充功能可正常生效；但密码输入框必须开启secureTextEntry属性实现密文输入，只要保留密码框的该属性，邮箱自动补全建议就会消失。当前运行环境为React Native 0.63.4。

• 首先存在低级拼写错误：textContentType的合法枚举值是emailAddress，当前代码中写为emailAdress（少写了一个d），本身就会降低系统对字段类型的识别稳定性。
• iOS系统QuickType输入栏的默认逻辑：当系统检测到当前页面存在开启secureTextEntry的密码输入框时，会自动将当前表单判定为账号密码登录场景，此时QuickType栏的展示优先级会向iCloud钥匙串的账号密码自动填充倾斜，默认会压制普通输入场景下的邮箱后缀自动补全提示。
• React Native 0.63.4版本的原生层bug：该版本在组装页面内多个TextInput的元数据传递给iOS输入系统时，只要检测到存在secureTextEntry={true}的输入框，就会错误跳过同页面其他非密码输入框的textContentType属性透传，导致系统完全识别不到邮箱字段的类型，自然不会弹出对应补全建议。

按改造成本和生效优先级排序：

• 修正属性配置：先把邮箱输入框的textContentType拼写修正为emailAddress，同时给密码输入框显式设置textContentType={'password'}，登录场景下可额外给邮箱字段补充textContentType={'username'}配置，让系统明确识别表单的字段关联，避免错误压制补全逻辑。注意：绝对不能为了触发补全就关闭密码框的secureTextEntry，会导致密码明文展示，存在严重安全风险。
• 修复RN版本原生bug：找到项目依赖中node_modules/react-native/Libraries/Text/TextInput/RCTBaseTextInputView.m文件，定位到textContentType赋值逻辑中「检测到secureTextEntry就跳过其他字段属性赋值」的分支并删除，重新编译iOS安装包即可。如果不想直接修改node_modules文件，可以使用patch-package将该修改固化为项目补丁，后续安装依赖不会丢失修改。
• 调整表单渲染逻辑：如果是分步表单场景，可以将邮箱输入和密码输入拆分为两个页面/两个渲染步骤，第一步只渲染邮箱输入框，用户输入完成进入下一步后再渲染密码输入框，从根源上避开同页面同时存在两类输入框的系统检测逻辑。
• JS层自定义补全：如果不想修改原生代码，可以自行在JS层实现邮箱补全逻辑：监听邮箱输入框的文本变化，当用户输入@字符后，在输入框上方展示自定义浮层，列出常用邮箱后缀（如@qq.com、@163.com、@gmail.com等）供用户点选填充，完全不依赖系统自带的补全能力。

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