web-dev-qa-db-fra.com

Comment changer la couleur du texte de la saisie de texte dans réagit natif?

L'espace réservé de l'entrée est vert mais je souhaite également effectuer la saisie de texte en vert (lorsque je tape le texte, la couleur du texte est en noir, ce qui n'est pas assez visible dans mon interface utilisateur). Comment puis-je le rendre vert aussi?

react-nativereact-native-androidreact-native-iosnative-base
4
Syuzanna

Si vous voulez changer la couleur TextInput, ajoutez un style color in.

l'exemple ci-dessous vous donne la couleur TextInput en bleu:

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}
      />
    );
  }
}
1
Sandeep Kumar

ajouter color: 'green'; dans votre style TextInput changera la couleur

<TextInput style={styles.textInput} />

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

dans native-base vous devrez aussi vous occuper de la thématisation voir docs

1
Mohamed Khalil

après avoir essayé de nombreuses solutions différentes, j'ai implémenté un composant TextInput personnalisé dans lequel j'ai placé un composant Text qui modifie la couleur d'arrière-plan et un TextInput avec une couleur de police transparente. J'espère que ce problème pourra être résolu rapidement d'une meilleure façon.

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>
}
0
David Barinas