Как изменить цвет текста при вводе текста в React Native?

Заполнитель ввода зеленый, но я также хочу сделать ввод зеленого текста (когда я набираю текст, цвет текста показывает черный, который недостаточно виден в моем пользовательском интерфейсе). Как я могу сделать его зеленым?


person Syuzanna    schedule 09.09.2017    source источник
comment
Пожалуйста, предоставьте код, чтобы показать, что вы пробовали до сих пор. Проверьте как спросить, чтобы узнать, как задать хороший вопрос. Проверьте стиль, чтобы TextInput узнать, как настроить ввод.   -  person bennygenel    schedule 09.09.2017
comment
твоя проблема решена?   -  person Vahid Boreiri    schedule 09.09.2017
comment
Вы используете нативную базу?   -  person Wanda Ichsanul Isra    schedule 12.09.2017
comment
На всякий случай, если кто-то попытается изменить цвет заполнителя. Чтобы изменить цвет заполнителя, добавляет реквизит с именем placeholderTextColor = grey.   -  person sophin    schedule 03.05.2021


Ответы (4)


добавьте color: 'green'; в свой стиль TextInput, и цвет изменится

<TextInput style={styles.textInput} />

const styles = StyleSheet.create({
 textInput: {
  color: 'green',
 },
});`

в native-base вам нужно будет также позаботиться о темах см. документы

person Mohamed Khalil    schedule 09.09.2017
comment
вы изменили цвета темы? - 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