Заполнитель ввода зеленый, но я также хочу сделать ввод зеленого текста (когда я набираю текст, цвет текста показывает черный, который недостаточно виден в моем пользовательском интерфейсе). Как я могу сделать его зеленым?
Как изменить цвет текста при вводе текста в React Native?
Ответы (4)
добавьте color: 'green';
в свой стиль TextInput
, и цвет изменится
<TextInput style={styles.textInput} />
const styles = StyleSheet.create({
textInput: {
color: 'green',
},
});`
в native-base
вам нужно будет также позаботиться о темах см. документы
person
Mohamed Khalil
schedule
09.09.2017
вы изменили цвета темы?
- person Mohamed Khalil; 09.09.2017
Просто создайте стиль для ввода и установите зеленый цвет.
const styles = StyleSheet.create({
textInputStyle: {
color: 'green',
}
});
и назначьте его вашему textInput
<TextInput
style={styles.textInputStyle}
placeholderTextColor='green'
underlineColorAndroid='green' />
person
Zubair Akber
schedule
19.09.2018
Если вы хотите изменить цвет TextInput, добавьте цвет в стилях.
ниже пример дает вам цвет 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}
/>
);
}
}
person
bashIt
schedule
09.09.2017
перепробовав множество различных решений, я реализовал пользовательский компонент 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>
}
person
David Barinas
schedule
07.02.2019
TextInput
узнать, как настроить ввод. - person bennygenel   schedule 09.09.2017