Alle TextInput-Props, die du brauchst, in einer durchsuchbaren Tabelle: mehrzeilige Textarea, keyboardType, secureTextEntry, autoComplete, returnKeyType, submitBehavior und mehr.
TextInput ist die zentrale React-Native-Komponente für eingegebenen Text. Halte den Wert im State und aktualisiere ihn über onChangeText, das dir den neuen String übergibt. Für eine Textarea setzt du multiline auf true und ergänzt textAlignVertical: "top", damit Android sich wie iOS verhält. keyboardType, autoComplete und secureTextEntry legen Tastatur, Autofill-Hinweis und Passwortmaskierung fest.
Die offizielle Referenz ist eine lange alphabetische Liste. Diese Seite enthält die Props, nach denen Leute suchen, mit ihren echten Werten und Standardwerten, in einer Tabelle, die du nach Name, Wert oder Plattform filtern kannst. Gib multiline, password oder android in das Feld ein, um die Liste einzugrenzen.
Gib ein Wort in das Filterfeld ein: einen Prop-Namen, einen Wert wie decimal-pad oder eine Plattform.
Zeilen mit einem Treffer an beliebiger Stelle bleiben sichtbar; die Zahl unter dem Feld zeigt dir, wie viele es sind.
Lies die Spalte mit dem Standardwert, bevor du eine Prop setzt; einige Standardwerte überraschen viele.
Kopiere die Beispiele unter der Tabelle für eine Textarea, ein E-Mail-Feld und eine Kette zum nächsten Feld.
autoCapitalize steht standardmäßig auf sentences, setze es daher bei E-Mail- und Benutzernamenfeldern auf none.
secureTextEntry funktioniert nicht zusammen mit multiline; ein Passwortfeld muss einzeilig bleiben.
inputMode hat Vorrang vor keyboardType, wenn beide gesetzt sind, also entscheide dich für eins.
maxLength stoppt die Eingabe am Limit und vermeidet so das Flackern, wenn du den String selbst in onChangeText kürzt.
Android zeichnet standardmäßig eine untere Linie; underlineColorAndroid="transparent" entfernt sie.
Häufige Fragen
Wie erstelle ich eine Textarea in React Native?
Es gibt keine eigene Textarea-Komponente. Verwende TextInput mit multiline auf true, gib ihm eine Höhe oder numberOfLines und ergänze textAlignVertical: "top", damit die erste Zeile auf Android wie auf iOS oben beginnt.
Warum fügt die Return-Taste eine neue Zeile ein, statt abzusenden?
Bei einem mehrzeiligen Feld steht submitBehavior standardmäßig auf "newline". Setze es auf "submit" oder "blurAndSubmit", wenn Return stattdessen onSubmitEditing auslösen soll. Einzeilige Felder verwenden standardmäßig "blurAndSubmit".
Was hat blurOnSubmit ersetzt?
submitBehavior. Die Dokumentation markiert blurOnSubmit als veraltet, und submitBehavior überschreibt es, wenn beide vorhanden sind.
Welche keyboardType-Werte funktionieren auf beiden Plattformen?
default, number-pad, decimal-pad, numeric, email-address, phone-pad und url. Andere, etwa twitter und web-search auf iOS oder visible-password auf Android, gelten nur für eine Plattform.
Controlled oder uncontrolled
Die meisten Screens übergeben value und onChangeText, sodass der State immer enthält, was auf dem Bildschirm steht, und du ihn validieren oder umformatieren kannst. defaultValue liefert einen Anfangsstring, ohne jeden Tastendruck zu verfolgen, was zu einem Feld passt, das du nur einmal beim Absenden liest.
Greif zu einer Ref, wenn du den Fokus verschieben musst. Ruft man in onSubmitEditing focus() auf der Ref des nächsten Feldes auf, entsteht das vertraute Verhalten, bei dem Return im Formular zum nächsten Feld springt.
Tastaturen und Autofill
keyboardType ändert die Tasten, die jemand sieht; es validiert nie, was eingegeben wird. Ein decimal-pad-Feld kann trotzdem eingefügte Buchstaben erhalten, also prüfe den String, bevor du ihn speicherst.
autoComplete ist der plattformübergreifende Hinweis für das Autofill des Systems, textContentType der nur für iOS. Setzt du beide bei Login-Feldern, werden gespeicherte Passwörter und Einmalcodes aus Nachrichten auf beiden Plattformen ausgefüllt.
TextInput-Beispiele
Eine mehrzeilige Textarea
textAlignVertical hält den Cursor auf Android oben, und die Zeichenanzahl wird direkt aus dem State gelesen.
E-Mail-Feld, das den Fokus ins nächste Feld verschiebt
returnKeyType="next" beschriftet die Taste, und onSubmitEditing fokussiert das Passwortfeld über dessen Ref.
TextInput-Props, Werte und Standardwerte
Prop
Werte oder Typ
Standard
Plattform
Was sie bewirkt
value / onChangeText
string / (text) => void
Beide
Kontrollierter Text und der Callback, der jeden neuen String erhält
defaultValue
Beide
Anfangstext, wenn du den Wert nicht kontrollierst
Beide
Hinweis, der angezeigt wird, solange das Feld leer ist
placeholderTextColor
Beide
Farbe des Platzhaltertexts
Beide
Erlaubt mehrere Zeilen; die Textarea von React Native
numberOfLines
Beide
Maximal angezeigte Zeilen; auf iOS nur mit der New Architecture