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

Question

我将dgCMatrix与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", }, }); 的底部边框。

关于如何做到这一点的任何想法？

编辑01

有趣的是，

TextInput

然后，我得到以下输出：

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

谢谢！

Answer 1

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

---编辑---

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

  <TextInput
    underlineColor={"transparent"}
  />

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。
  但是，如果您要更改未聚焦的文本输入下划线颜色，则可以使用上面的代码

Answer 3

如Docs所述：

  

TextInput默认情况下在其视图的底部具有边框。此边框的填充由系统提供的背景图像设置，无法更改。避免这种情况的解决方案是要么不显式设置高度，否则系统将在正确的位置显示边框，或者通过将underlineColorAndroid设置为transparent来不显示边框

因此您可以简单地使用underlineColorAndroid道具：

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

Answer 4

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

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

• Text 是更改您输入的值
• 主要是改变下划线和标签颜色