Wie ändere ich das Styling des TextInput-Platzhalters in React Native?

Lesezeit: 4 Minuten

Gibt es eine Möglichkeit einzustellen fontStyle: 'italic' nur für die placeholder des TextInput in React Native?

suchen hier in der Dokumentation Es scheint, als könnten Sie nur einen Platzhalter und eine Platzhaltertextfarbe festlegen.

  • nö. würde mich freuen eine lösung zu finden

    – Zohar Levin

    13. April 2016 um 15:17 Uhr

  • naja.. jetzt steh ich auch vor dem selben problem..

    – animekun

    23. April 2016 um 7:41 Uhr

  • Wenn Sie nur die Farbe ändern müssen, sehen Sie sich diese Antwort an

    – Abner Terribili

    7. Mai 2017 um 0:32 Uhr

Sie können Ihre Platzhalterfarbe festlegen, indem Sie die verwenden placeholderTextColor Stütze.

<TextInput placeholderTextColor={'red'} />

  • Das war die Antwort, nach der ich gesucht habe, nicht die Antwort auf die ursprüngliche Frage in diesem Thread, aber trotzdem.. hat mir geholfen!

    – Stefan Mc

    19. März 2019 um 16:08 Uhr

  • Dies sollte die akzeptierte Antwort sein

    – mttetc

    24. Januar um 10:20 Uhr

Benutzer-Avatar
Jake Coxon

Verbesserung von Daniels Antwort für eine allgemeinere Lösung

class TextInput2 extends Component {
  constructor(props) {
    super(props);
    this.state = { placeholder: props.value.length == 0 }
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(ev) {
    this.setState({ placeholder: ev.nativeEvent.text.length == 0 }); 
    this.props.onChange && this.props.onChange(ev); 
  }
  render() {
    const { placeholderStyle, style, onChange, ...rest } = this.props;

    return <TextInput 
      {...rest} 
      onChange={this.handleChange}
      style={this.state.placeholder ? [style, placeholderStyle] : style}
      />
  }
}

Verwendungszweck:

<TextInput2 
  value={this.state.myText}
  style={{ fontFamily: "MyFont" }}
  placeholderStyle={{ fontFamily: "AnotherFont", borderColor: 'red' }}
/>

  • es gibt diesen Fehler: undefined is not an object (Evaluierung von ‘_th is2.state.myText’) – Mache ich etwas falsch?

    – simaAttar

    20. Oktober 2019 um 8:09 Uhr


  • @cheesus warum nicht?

    – Jake Coxon

    6. Januar 2021 um 1:41 Uhr

  • Weil es 2300 % mehr Codezeilen verbraucht als die Antwort von Sebastián Lara.

    – Käse

    7. Januar 2021 um 8:53 Uhr

  • @cheesus Es beantwortet auch tatsächlich die Frage des OP richtig. OP erkennt das Vorhandensein von placeholderTextColor an und fragt ausdrücklich, wie andere Eigenschaften gestaltet werden sollen. Auch diese Antwort wurde vor Hooks geschrieben, aber es sollte trivial sein, in weniger Codezeilen in eine Hook-basierte Alternative zu konvertieren

    – Jake Coxon

    9. Januar 2021 um 0:05 Uhr


  • Habe das nicht gemerkt. Allerdings bin ich beim googeln, wie man die Platzhalterfarbe einstellt, von Google gekommen. Nach der Anzahl der Stimmen für die andere Antwort zu urteilen, bin ich nicht der einzige.

    – Käse

    10. Januar 2021 um 17:56 Uhr

Benutzer-Avatar
Daniel Basedow

Sie können diese Funktionalität selbst erstellen. Der Platzhalter wird angezeigt, wenn die Eingabe leer ist, sodass Sie Ihren Status überprüfen und den FontStyle entsprechend ändern können:

<TextInput
  onChangeText={txt => this.setState({enteredText: txt})}
  fontStyle={this.state.enteredText.length == 0 ? 'italic' : 'normal'}
  style={style.input} />

Aus irgendeinem Grund scheint dies mit fontFamily = System nicht zu funktionieren. Sie müssen also die FontFamily explizit angeben.

  • onChange übergibt ein Ereignisobjekt, um den zu verwendenden Text zu erhalten event.nativeEvent.text

    – Jake Coxon

    29. September 2016 um 7:25 Uhr

  • Oder verwenden Sie onChangeText, da es nur den Text übergibt

    – rdixonbpk

    1. Dezember 2016 um 21:41 Uhr

  • Es gibt eine Verzögerung zwischen dem ersten eingegebenen Zeichen und der Stilaktualisierung, was zu einem sichtbaren Sprung in den Stilen führt

    – Roman Pawlowskyj

    7. April 2021 um 0:51 Uhr

Inhalt und placeHolder von TextInput verwenden einen gemeinsamen Stil, sodass Sie fontWeight und fontSize für placeHolder festlegen können. Zum anderen können Sie die Eigenschaft festlegen placeholderTextColor zum TextInput

Benutzer-Avatar
Filip Maslovaric

Sie können auch eine zustandslose Komponente verwenden.

Hier ist meine Lösung:

Zuerst in meiner Bildschirmkomponente …

import React from 'react';
import { View } from 'react-native';
import MyWrappedComponent from '../wherever/your/components/are/MyWrappedComponent';

class ScreenComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      myText: null,
    };
    this.handleTextOnChange = this.handleTextOnChange.bind(this);
  }

  handleTextOnChange(myText) {
    this.setState({ myText });
  }

  render() {
    const { myText } = this.state

  return (
    <View>
      <MyWrappedComponent            
        value={myText}
        placeholder="My Placeholder Text"
        onChangeText={this.handleTextOnChange}
        style={styles.someStyle}
        placeholderStyle={style.somePlaceholderStyle}
      />
    </View>
  )
}

Dann, in meiner eingewickelten Komponente…

import React from 'react';
import { TextInput } from 'react-native-gesture-handler';

const MyWrappedComponent = ({
  style,
  placeholderStyle,
  value,
  ...rest
}) => (
  <TextInput
    {...rest}
    style={!value ? [style, placeholderStyle] : style}
  />
);

export default MyWrappedComponent;

Benutzer-Avatar
dhahn

Wenn Sie einfach die Positionierung Ihres Platzhalters anpassen möchten, können Sie das Innere umwickeln und dem :

<View style={{
    flex: 0.3,
    alignContent: "center",
    justifyContent: "center",
    alignSelf: "center"
    }}>

Dadurch kann der Platzhalter zentriert ausgerichtet werden, da „alignContent“, „alignItems“, „justifyContent“ manchmal nicht funktionieren. Ebenfalls:

inputContainerStyle={{
                    borderColor: 'transparent'
                }}

um alle Grenzlinien zu stylen (die obige entfernt alle Grenzen, die von ‘react-native-elements’ stammen).

Benutzer-Avatar
nein

Siehe Platzhalter:

TextInput Der Platzhalter erbt die Stile von TextInput. So können wir unsere Stile in den TextInput-Stilen festlegen. Manchmal brauchen wir eine andere Farbe für Platzhalter, damit wir sie einfach verwenden können placeholderTextColor Requisiten zum Anpassen.

1246130cookie-checkWie ändere ich das Styling des TextInput-Platzhalters in React Native?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy