wake-up-neo.com

Wie ändere ich die Textfarbe der Texteingabe in respons native?

Der Platzhalter der Eingabe ist grün, aber ich möchte auch die grüne Texteingabe vornehmen (wenn ich schreibe, zeigt die Textfarbe schwarz, was in meiner Benutzeroberfläche nicht sichtbar ist). Wie kann ich es auch grün machen?

4
Syuzanna

Wenn Sie die TextInput-Farbe ändern möchten, fügen Sie eine color in -Stile hinzu.

im folgenden Beispiel erhalten Sie die TextInput-Farbe als blau:

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

wenn Sie color: 'green'; in Ihrem TextInput-Stil hinzufügen, ändert sich die Farbe

<TextInput style={styles.textInput} />

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

in native-base müssen Sie sich auch um das Theming kümmern siehe docs

1
Mohamed Khalil

nachdem ich viele verschiedene Lösungen ausprobiert hatte, implementierte ich eine benutzerdefinierte TextInput-Komponente, in der ich eine Textkomponente platzierte, die die Farbe als Hintergrund ändert, und einen TextInput darüber, der eine transparente Schriftfarbe hat. Ich hoffe, dass dieses Problem bald besser behoben werden kann.

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