React Native TextInput聚焦时白色条如何移除？underlineColor设置无效

在使用react-native-paper的MD3DarkTheme时，遇到TextInput组件聚焦状态下会显示白色下划线的问题，尝试设置underlineColor="transparent"和underlineColorAndroid="transparent"后，问题依然存在。

原组件代码 #

<TextInput
  style={[styles.input, styles.textArea]}
  placeholder="Raison de l'absence"
  value={reason}
  onChangeText={setReason}
  underlineColor="transparent"
  underlineColorAndroid="transparent"
  autoFocus={false}
/>;

原样式代码 #

textArea: {
    borderColor: 'transparent',
},

input: {
    width: '100%',
    height: 40,
    borderWidth: 1,
    borderRadius: 5,
    marginBottom: 15,
    paddingLeft: 10,
    justifyContent: 'center',
    color: PaperDarkTheme.colors.text,
},

解决方法 #

查看react-native-paper文档后发现，聚焦状态下的下划线由activeUnderlineColor属性控制，仅设置underlineColor无法覆盖聚焦时的样式。只需给TextInput添加activeUnderlineColor="transparent"（或与当前主题背景色一致的颜色）即可解决问题。

修改后的组件代码示例：

<TextInput
  style={[styles.input, styles.textArea]}
  placeholder="Raison de l'absence"
  value={reason}
  onChangeText={setReason}
  underlineColor="transparent"
  underlineColorAndroid="transparent"
  activeUnderlineColor="transparent"
  autoFocus={false}
/>;

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