React Native Formulare: Eingaben, Validierung und die Tastatur
Leitfaden zu Formularen und Validierung in React Native
React Native Formulare: Kontrollierte Eingaben und Validierung | We.Inc
Baue ein React-Native-Formular mit kontrollierten TextInputs, einer einzigen validate-Funktion, Fehlermeldungen unter jedem Feld und Tastatur-Handling. Teste die Validierung live in deinem Browser.
Ein zuverlässiges React-Native-Formular braucht drei Teile: per State kontrollierte TextInputs, eine validate-Funktion, die pro Feld einen Fehler zurückgibt, und Tastatur-Handling. Zeig jede Meldung erst, wenn die Person das Feld verlassen oder auf Absenden gedrückt hat. Pack den Screen in eine KeyboardAvoidingView und setze keyboardShouldPersistTaps="handled" an der ScrollView, damit der Absenden-Button erreichbar bleibt.
Bausteine eines React-Native-Formulars
Aufgabe
Werkzeug
Werte halten
useState mit einem Objekt oder ein Hook pro Feld
Werte prüfen
Eine pure validate(values)-Funktion, die ein errors-Objekt zurückgibt
Fehler anzeigen
Text unter jedem Feld, verknüpft über accessibilityLabel oder eine Live Region
Felder sichtbar halten
KeyboardAvoidingView mit behavior="padding" auf iOS
Bei geöffneter Tastatur auf Absenden tippen
keyboardShouldPersistTaps="handled" an der ScrollView
Zwischen Feldern wechseln
returnKeyType="next" und focus() auf der nächsten ref
Die Validierungsregeln auf dieser Seite sind reines JavaScript, die Vorschau unten führt also genau die Funktion aus, die du in deinen React-Native-Screen einfügen würdest. Fülle die Felder aus, verlasse sie und drücke Konto erstellen, um zu sehen, wie jede Meldung erscheint und wieder verschwindet.
Jedes Feld schreibt über onChangeText in ein einziges values-Objekt.
onBlur markiert ein Feld als berührt, damit sein Fehler angezeigt werden kann, ohne jemanden mitten beim Tippen anzuschreien.
validate(values) läuft bei jedem Render und gibt ein Objekt mit einer Meldung pro verletzter Regel zurück.
Absenden markiert jedes Feld als berührt und bricht ab, wenn das errors-Objekt Schlüssel enthält.
Sind keine Fehler mehr übrig, sendet der Handler die Werte und kann Keyboard.dismiss() aufrufen.
Halte validate pure, damit du sie ohne Rendering testen und auf dem Server wiederverwenden kannst.
Deaktiviere den Absenden-Button nicht, solange das Formular ungültig ist; viele Menschen finden erst durch das Drücken heraus, was fehlt.
Setze den Fehlertext direkt unter sein Feld, in Worten, die sagen, wie man das Problem behebt.
Entferne Leerzeichen am Rand von E-Mail-Adressen, bevor du sie prüfst; ein mit eingefügtes Leerzeichen am Ende ist der häufigste falsche Fehler.
Prüfe alles auf dem Server erneut. Client-Regeln leiten Menschen an, sind aber nicht vertrauenswürdig.
Häufige Fragen
Brauche ich in React Native eine Formular-Bibliothek?
Nein. Ein paar Felder funktionieren gut mit useState und einer validate-Funktion wie der auf dieser Seite. Bibliotheken helfen, wenn ein Formular viele Felder, verschachtelte Arrays oder asynchrone Prüfungen hat, und React Hook Form beschreibt sich selbst als im Web und in React Native einsetzbar.
Wie verhindere ich, dass die Tastatur meine Eingabefelder verdeckt?
Pack das Formular in eine KeyboardAvoidingView. Sie passt ihre Höhe, Position oder ihr unteres Padding an die Tastatur an; behavior="padding" ist auf iOS die übliche Wahl. keyboardVerticalOffset berücksichtigt einen Header über der View und ist standardmäßig 0.
Warum braucht mein Absenden-Button zwei Taps?
keyboardShouldPersistTaps der ScrollView steht standardmäßig auf "never", der erste Tap schließt also nur die Tastatur. Setze es auf "handled", und der Button erhält den Tap sofort.
Wie schließe ich die Tastatur nach dem Absenden?
Rufe Keyboard.dismiss() auf, das laut Doku die aktive Tastatur schließt und den Fokus entfernt.
Wann ein Fehler angezeigt werden sollte
Jede Regel rot anzuzeigen, sobald sich der Screen öffnet, fühlt sich wie eine Standpauke an. Merke dir, welche Felder jemand berührt hat, und zeig eine Meldung erst, nachdem das Feld verlassen wurde, oder nach einem Absendeversuch.
Sobald eine Meldung sichtbar ist, führe die Prüfung bei jedem Tastendruck erneut aus, damit sie in dem Moment verschwindet, in dem der Wert gültig wird. Diese sofortige Bestätigung ist der Lohn dafür, mit dem Anzeigen zu warten.
Fehler barrierefrei machen
Ein roter Rahmen allein sagt niemandem etwas, der einen Screenreader nutzt oder Farben schlecht unterscheidet. Schreib das Problem als Text und nimm es ins accessibilityLabel des Felds auf, damit es vorgelesen wird, wenn der Fokus dort landet.
Auf Android sorgt accessibilityLiveRegion="polite" am Fehler-Text dafür, dass TalkBack die Meldung ansagt, sobald sie erscheint, ohne den Fokus zu verschieben.
Formular-Code zum Kopieren
Die validate-Funktion
Reines JavaScript ohne React-Native-Imports, sie läuft also in Tests, in der Web-Vorschau und auf einem Server.
Registrierungs-Screen mit berührten Feldern und Tastatur-Handling
Ein values-Objekt, ein touched-Objekt und ein Field-Helfer, der seinen Fehler nur dann zeigt, wenn er soll.
Gib deinen Namen ein.
Gib deine E-Mail-Adresse ein.
Dieser E-Mail-Adresse fehlt ein @ oder eine Domain.
Verwende mindestens 8 Zeichen.
Die beiden Passwörter stimmen nicht überein.
Validierungsvorschau
Die Prüfungen führen die validate-Funktion aus dem Code unten aus. Meldungen erscheinen, nachdem du ein Feld verlassen oder den Button gedrückt hast.
Name
Passwort
Passwort bestätigen
Konto erstellen
Alle Felder sind gültig. Eine echte App würde die Werte jetzt senden.