输入的占位符为绿色,但我还想输入绿色的文本(当我键入文本时,文本颜色显示为黑色,这在我的UI中不够明显)。我如何也将其设为绿色?
以color: 'green';
样式添加TextInput
将改变颜色
<TextInput style={styles.textInput} />
const styles = StyleSheet.create({
textInput: {
color: 'green',
},
});`
在native-base
中,您还需要注意主题see docs
如果要更改TextInput颜色,请在样式中添加color。
下面的示例为您提供TextInput颜色为蓝色:
export default class UselessTextInput extends Component {
constructor(props) {
super(props);
this.state = { text: 'Useless Placeholder' };
}
render() {
return (
<TextInput
style=
{{
height: 40, borderColor: 'gray', borderWidth: 1, color : "blue"
}}
onChangeText={(text) => this.setState({text})}
value={this.state.text}
/>
);
}
}
简单地为您的输入创建样式并将颜色设置为绿色
const styles = StyleSheet.create({
textInputStyle: {
color: 'green',
}
});
并将其分配给您的textInput
<TextInput
style={styles.textInputStyle}
placeholderTextColor='green'
underlineColorAndroid='green' />
在尝试了许多不同的解决方案之后,我实现了一个自定义的TextInput组件,在其中放置了一个Text组件,该组件将颜色更改为背景,并在其上放置了一个TextInput,后者具有透明的字体颜色。我希望这个问题能尽快以更好的方式解决。
updateText(v) {
const { onChange } = this.props;
this.setState({ text: v});
onChange(v);
}
render() {
const { changeColor } = this.props;
const { text } = this.state;
return <View style={{ position: 'relative', flex: 1 }}>
<Text style={ [ { flex: 1, position: 'absolute', zIndex: 1 }, changeColor? { color: red } : null ]}>
{text}
</Text>
<RTextInput
onChangeText={v => this.updateText(v)}
style={[{ flex: 1, color: 'transparent', zIndex: 100 }]}
{...props}
/>
</View>
}