【问题标题】：How to get rid of the bottom border of the React Native Paper TextInput when focused聚焦时如何摆脱React Native Paper TextInput的底部边框
【发布时间】：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"} }} />

然后，我得到以下输出：

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

谢谢！

【问题讨论】：

标签： javascript android iphone react-native expo

【解决方案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'}}}
/>

【讨论】：