如何在React Native Paper TextInput获得焦点时去掉底部边框

Question

我是使用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"} }} />

然后，我得到了以下输出：

但我只想修改底部边框的颜色，并保持尖尖的颜色不变。谢谢！最初的回答。

- davidesp

Answer 1

可能的解决方案是：

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

...

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

- Chun

Answer 2

您已将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。
然而，如果您想要更改未聚焦文本输入下划线颜色，则可以使用上述代码。

- Shashin Bhayani

---

这个部分有效，当输入框没有焦点时它会移除底部边框（第一张图片），但是当输入框获得焦点时会保留底部边框（第二张图片，完全相同）。 - davidesp

Answer 3

要在焦点状态下更改下划线和标签颜色，您需要传递主题属性 props，像这样：

要更改焦点时的下划线和标签颜色，您需要传递主题属性 props，如下所示：

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

• 文本是指更改您输入的值
• 主要是指更改下划线和标签颜色

- Ajay Kadoula

---

给定主要属性为“透明”时，聚焦时会去除下划线颜色。 - Tharzeez

Answer 4

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

--- 编辑 ---

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

最初的回答已被编辑。

  <TextInput
    underlineColor={"transparent"}
  />

- Sanyam Jain

---

为什么要这样做，以及如何做呢？ - Nico Haase

这个部分地起作用，当输入框没有焦点时它会移除底部边框（第一张图片），但是当输入框获得焦点时会保留底部边框（第二张图片，完全相同）。 - davidesp

Answer 5

如文档所述：

TextInput默认具有视图底部的边框。该边框其填充由系统提供的背景图像设置，且无法更改。避免此问题的解决方案是要么不明确设置高度，在这种情况下，系统将负责以正确位置显示边框，要么通过将underlineColorAndroid设置为透明来隐藏边框。

因此，您可以简单地使用underlineColorAndroid属性：

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

- flix

---

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