如何移除Expo React Native中TextInput输入时出现的下划线？

双下划线来源说明 #

• underlineColorAndroid控制的是React Native安卓端TextInput组件自带的底部默认下划线，你设置为绿色时显示的就是这条下划线
• 输入时当前字符下方的白色下划线是安卓输入法自带的拼写联想/拼写检查提示下划线，和组件自带下划线是完全独立的两个效果

完整解决方案 #

第一步：修正属性写法+补全拼写相关关闭属性 #

你之前的autoCorrect='false'写法错误，字符串类型的'false'不会生效，需要传入布尔值，同时补全其他拼写关联属性的关闭配置：

<TextInput
  // 关闭组件自带下划线
  underlineColorAndroid="transparent"
  // 关闭自动更正
  autoCorrect={false}
  // 关闭拼写检查
  spellCheck={false}
  // 关闭自动补全
  autoComplete="off"
  // 关闭内容类型联想
  textContentType="none"
  // 关闭首字母自动大写
  autoCapitalize="none"
  {/* 其他你的自定义属性 */}
/>

第二步：特殊场景兜底方案 #

如果上述配置后输入法下划线依旧存在，可添加keyboardType属性强制关闭拼写提示：

// 普通文本输入场景
keyboardType="text"
// 如果还是存在下划线，可替换为以下配置，强制禁用输入法拼写联想
keyboardType="visible-password"

注意visible-password类型的键盘不会触发输入法的任何联想、拼写检查逻辑，适合需要完全清除下划线的场景，不会影响普通文本输入。

配置完成后，组件自带下划线和输入法提示下划线都会彻底移除，不会再出现双下划线问题。

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