Baue ein Passwortfeld in React Native: secureTextEntry, ein Schalter zum Ein- und Ausblenden, autoComplete und textContentType für Passwortmanager, plus eine Stärkeanzeige zum Ausprobieren.
Mach aus einem TextInput mit secureTextEntry ein Passwortfeld: Es maskiert jedes Zeichen und lässt sich nicht mit multiline kombinieren. Ergänze einen Pressable-Augenbutton, der diese Prop zum Ein- und Ausblenden umschaltet. Für Passwortmanager setzt du autoComplete="password" auf Login-Screens oder "new-password" bei der Registrierung, dazu den passenden textContentType für iOS.
Props für Passwortfelder bei Login und Registrierung
Prop
Login-Feld
Registrierungsfeld
secureTextEntry
true (bis zum Anzeigen)
true (bis zum Anzeigen)
autoComplete
"password"
"new-password"
textContentType (iOS)
"password"
"newPassword"
passwordRules (iOS)
nicht nötig
optionale Regeln für generierte Passwörter
autoCapitalize
"none"
"none"
autoCorrect
Probier das Feld unten aus: Gib ein Passwort ein, schalte den Anzeigen-Button um und beobachte, wie die Anzeige reagiert. Wechsle zwischen Login und Registrierung, um zu sehen, welche Autofill-Props jeder Screen tragen sollte; die Logik der Anzeige ist dieselbe kurze Funktion, die du in deine App einfügen kannst.
Ein Boolean im State, hidden, startet mit true und wird an secureTextEntry übergeben.
Der Augen-Pressable sitzt neben dem Feld und schaltet hidden bei jedem Tippen um.
Sein accessibilityLabel wechselt zwischen Passwort anzeigen und Passwort ausblenden, sodass die Aktion immer klar ist.
Die Stärkefunktion bewertet Länge und Zeichenvielfalt und gibt ein Label für den Balken unter dem Feld zurück.
Schalte autoCorrect aus und setze autoCapitalize auf none, damit die Tastatur ein Passwort nie umschreibt.
Nutze new-password auf Registrierungs- und Zurücksetzen-Screens; das sagt dem System, ein generiertes Passwort statt eines gespeicherten anzubieten.
Mach den Anzeigen-Button groß genug zum Antippen und platziere ihn außerhalb des Textbereichs, damit er nie die letzten Zeichen verdeckt.
Betrachte jede clientseitige Anzeige nur als Hinweis. Die Länge zählt am meisten, und der Server entscheidet, was er akzeptiert.
Logge den Wert des Feldes beim Debuggen nie und sende ihn nie an Analytics.
Häufige Fragen
Wie verberge ich ein Passwort in React Native?
Setze secureTextEntry auf dem TextInput. Laut Dokumentation verdeckt es den Text, damit Passwörter sicher bleiben, steht standardmäßig auf false und funktioniert nicht, wenn multiline auf true steht.
Wie füge ich einen Button zum Anzeigen des Passworts hinzu?
Halte einen Boolean hidden im State, übergib ihn an secureTextEntry und rendere neben dem Feld einen Pressable, der ihn umschaltet. Beschrifte den Button, damit Screenreader ansagen, was ein Tippen bewirkt.
Warum schlägt iOS bei der Registrierung kein starkes Passwort vor?
Setze textContentType="newPassword" auf dem Feld. Mit diesem Wert kannst du auch passwordRules in der Passwortregel-Syntax von Apple übergeben, damit das generierte Passwort deine Anforderungen erfüllt.
Welchen autoComplete-Wert sollte ein Passwortfeld nutzen?
"password", wo jemand ein bestehendes Passwort eingibt, und "new-password", wo jemand eines erstellt. Beide stehen in der Liste der plattformübergreifenden autoComplete-Werte.
Autofill auf beiden Plattformen
autoComplete ist der Hinweis, den beide Plattformen lesen, während textContentType nur für iOS gilt und das Feld mit dem Schlüsselbund des Geräts verbindet. Beide zu setzen kostet nichts und deckt mehr Passwortmanager ab.
Kombiniere das Passwortfeld mit einem Benutzernamen- oder E-Mail-Feld mit autoComplete="username" oder "email", damit der Manager weiß, zu welchem Konto das Passwort gehört.
Was die Stärkeanzeige misst
Die Anzeige auf dieser Seite zählt die Länge und die verwendeten Zeichenarten: Kleinbuchstaben, Großbuchstaben, Ziffern und Symbole. Sie ist ein schneller Anstoß, keine Prüfung, und sie erkennt kein Passwort, das häufig verwendet wird oder bereits geleakt ist.
Lange Passphrasen schneiden hier gut ab, weil drei der vier Punkte aus der Länge kommen und nur einer aus der Mischung von Zeichenarten. Kombiniere die Anzeige mit einer Prüfung auf Mindestlänge in deiner Validierung.
Code für das Passwortfeld
PasswordInput mit Anzeigen-Button
Übergib isNew auf Registrierungs-Screens. Die Beschriftung des Buttons beschreibt immer, was das nächste Tippen bewirkt.
Funktion für den Stärkewert
Gibt für jeden nicht leeren String 1 bis 4 zurück. Ordne der Zahl ein Label und eine Balkenbreite zu.