聚焦时如何摆脱React Native Paper TextInput的底部边框

Posted 2023-05-07

【中文标题】聚焦时如何摆脱React Native Paper TextInput的底部边框

【英文标题】：How to get rid of the bottom border of the React Native Paper TextInput when focused

【发布时间】：2019-07-18 12:30:29

【问题描述】：

我正在使用 react-native 和 react-native-paper。

我有以下代码：

import React,  Component  from 'react';
import  View, StyleSheet  from 'react-native';
import  Button, TextInput  from 'react-native-paper';

export default class Header extends Component 

  state = 
    text: '',
  ;

  render() 
    return (
      <View style=styles.container>
        <TextInput value=this.state.text style=styles.input />
        <Button mode="contained" style=styles.button>Add Todo</Button>
      </View>
    );
  



const styles = StyleSheet.create(
  container: 
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    alignSelf: 'stretch',
    height: 40,
  ,
  input: 
    flex: 1,
    height: 40,
    justifyContent: "center",
  ,
  button: 
    flex: 0,
    height: 40,
    justifyContent: "center",
    backgroundColor: "#54c084",
  ,
);

输出如下内容：

那么，当输入获得焦点时是这样的：

我需要去掉TextInput 的底部边框。

你知道怎么做吗？

编辑 01

有趣，如果我这样做：

<TextInput value=this.state.text style=styles.input theme= colors: primary: "#f00"  />

然后，我得到以下输出：

但我只想修改底部边框的颜色，保持插入符号的颜色不变。

谢谢！

【参考方案1】：

您已将 underlineColor 属性设置为 transparent

<TextInput 
  value=this.state.text
  style=styles.input
  underlineColor="transparent"   // add this
/>

编辑

这是react-native-paper 中的一个问题。您不能更改活动文本输入下划线颜色。 https://github.com/callstack/react-native-paper/issues/688. 但是，如果您想更改未聚焦的文本输入下划线颜色，您可以使用上面的代码

【讨论】：

这部分工作，当输入没有焦点时它会删除底部边框（第一张图片），但在输入获得焦点时保留底部边框（第二张图片，完全相同）

【参考方案2】：

如Docs 描述：

TextInput 默认在其视图底部有一个边框。此边框由系统提供的背景图片设置填充，不可更改。避免这种情况的解决方案是不显式设置高度，在这种情况下系统将负责在正确位置显示边框，或者通过将 underlineColorandroid 设置为透明来不显示边框

所以你可以简单地使用underlineColorAndroid props：

<TextInput 
  value=this.state.text
  style=styles.input
  underlineColorAndroid="transparent"
/>

【讨论】：

你能试试react-native-paper TextInput.js 并给出硬编码的underlineColorAndroid吗？

【参考方案3】：

将下划线颜色设置为透明。

--- 编辑---

你可以通过设置透明属性underlineColor来设置下划线颜色。

  <TextInput
    underlineColor="transparent"
  />

【讨论】：

为什么要这样做，怎么做？

这部分工作，它在输入没有焦点时删除底部边框（第一张图片），但在输入获得焦点时保留底部边框（第二张图片，完全相同）

【参考方案4】：

要在聚焦时更改下划线和标签颜色，您需要传递道具主题，如下所示：

theme=colors: text: 'black', primary: 'rgb(23, 157, 227)'

文本

是更改您输入输入的值

主要

是改变下划线和标签颜色

【讨论】：

给予主要：'透明'在聚焦时移除下划线颜色

【参考方案5】：

可能的解决方案是

const theme = useTheme();
const  colors  = theme;

...

<TextInput
  underlineColor="transparent"
  theme=...theme, colors: ...colors, primary: 'transparent'
/>