如何移除react-native-floating-label-input标签点击后的背景色？

我在使用react-native-floating-label-input组件时遇到问题：点击输入框后，浮动标签的文本背后会显示出背景色。查阅组件文档、联系开发者后均未解决。尝试通过labelStyles设置backgroundColor无效，从截图可见问题出在文本背后的背景区域，而非文本本身样式。

初始代码 #

<View style={{ padding: 50, flex: 1, backgroundColor: '#fff' }}>
    <FloatingLabelInput
      label={'label'}
      value={cont}
      onChangeText={value => setCont(value)}
    />
</View>

修改后的尝试代码 #

<FloatingLabelInput
  label={'label'}
  value={cont}
  onChangeText={value => setCont(value)}
  labelStyles={{ backgroundColor: '#ad8b8b', padding: 12 }}
/>

问题截图 #

可行解决方案 #

这个组件的浮动标签通常依赖背景遮罩层实现覆盖输入框边框的效果，labelStyles仅控制文本样式，无法影响遮罩层。可以尝试以下方法：

1. 使用组件专属属性设置标签背景
   多数同类组件会提供labelBackground这类属性，直接设置它与父容器背景色一致，就能隐藏异常背景：

   <FloatingLabelInput
     label={'label'}
     value={cont}
     onChangeText={value => setCont(value)}
     labelBackground="#fff" // 和外层View的backgroundColor保持一致
   />
   

2. 修改标签容器样式
   如果组件没有labelBackground，可以查找是否有labelContainerStyles属性，给标签容器设置背景色：

   <FloatingLabelInput
     label={'label'}
     value={cont}
     onChangeText={value => setCont(value)}
     labelContainerStyles={{ backgroundColor: '#fff' }}
   />
   

3. 强制覆盖组件内部样式
   若以上方法无效，可借助React Native调试工具查看组件内部元素的样式类名，针对性修改：

   <FloatingLabelInput
     label={'label'}
     value={cont}
     onChangeText={value => setCont(value)}
     customStyles={{
       labelWrapper: {
         backgroundColor: '#fff'
       }
     }}
   />
   

   注：不同版本组件的内部样式命名可能不同，需自行确认。

4. 调整标签的边距与位置
   异常背景可能是标签padding过大或位置偏移导致的，可减少padding并调整位置让标签贴合文本：

   <FloatingLabelInput
     label={'label'}
     value={cont}
     onChangeText={value => setCont(value)}
     labelStyles={{ 
       backgroundColor: 'transparent',
       paddingHorizontal: 4,
       transform: [{ translateY: -12 }]
     }}
   />
   

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