我使用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"} }} />然后，我得到以下输出：
但我只是想修改底部边框的颜色，并保持不变的插入符号的颜色。
谢谢！
6条答案
按热度按时间kyvafyod1#
您已将
underlineColor属性设置为transparent编辑
这是
react-native-paper中的一个问题。不能更改活动文本输入下划线颜色。https://github.com/callstack/react-native-paper/issues/688。但是，如果你想改变无焦点的文本输入下划线颜色，你可以使用上面的代码
6yt4nkrj2#
可能的解决方案是
ih99xse13#
将下划线颜色设置为透明。
---编辑---
您可以通过将transparent设置为prop
underlineColor来设置下划线颜色。q5lcpyga4#
要在对焦时更改下划线和标签颜色，需要传递props主题，如下所示：
*Text用于更改输入的值
*主要是改变下划线和标签颜色
slmsl1lt5#
如Docs描述：
默认情况下，TextInput在其视图的底部有一个边框。此边框的填充由系统提供的背景图像设置，并且无法更改。避免这种情况的解决方案是不显式设置高度，系统将在正确的位置显示边框，或者通过将underlineColorAndroid设置为透明来不显示边框
所以你可以简单地使用underlineColorAndroid props：
r1zhe5dt6#
有一个新属性名为
activeUnderlineColor。这也是一个标签--不幸的是。