Bouw een wachtwoordveld in React Native: secureTextEntry, een knop om te tonen en verbergen, autoComplete en textContentType voor wachtwoordbeheerders, plus een sterktemeter.
Maak van een TextInput een wachtwoordveld met secureTextEntry, dat elk teken maskeert en niet te combineren is met multiline. Voeg een Pressable-oogknop toe die die prop omzet om te tonen en te verbergen. Voor wachtwoordbeheerders zet u autoComplete="password" op inlogschermen of "new-password" bij aanmelden, plus de bijbehorende textContentType voor iOS.
Props voor wachtwoordvelden bij inloggen en aanmelden
Prop
Inlogveld
Aanmeldveld
secureTextEntry
true (tot het getoond wordt)
true (tot het getoond wordt)
autoComplete
"password"
"new-password"
textContentType (iOS)
"password"
"newPassword"
passwordRules (iOS)
niet nodig
optionele regels voor gegenereerde wachtwoorden
autoCapitalize
"none"
"none"
autoCorrect
Probeer het veld hieronder: typ een wachtwoord, zet de toonknop om en zie de meter reageren. Wissel tussen inloggen en aanmelden om te zien welke autofill-props elk scherm moet hebben; de logica van de meter is dezelfde korte functie die u in uw app kunt plakken.
Een boolean in state, hidden, begint als true en gaat naar secureTextEntry.
De oog-Pressable staat naast het veld en zet hidden bij elke druk om.
Zijn accessibilityLabel wisselt tussen Wachtwoord tonen en Wachtwoord verbergen, zodat de actie altijd duidelijk is.
De sterktefunctie scoort lengte en variatie in tekens en geeft een label terug voor de balk onder het veld.
Zet autoCorrect uit en autoCapitalize op none, zodat het toetsenbord nooit een wachtwoord herschrijft.
Gebruik new-password op aanmeld- en resetschermen; het vertelt het systeem een gegenereerd wachtwoord aan te bieden in plaats van een opgeslagen.
Maak de toonknop groot genoeg om op te tikken en zet hem buiten het tekstvak, zodat hij nooit de laatste tekens bedekt.
Zie elke meter aan de clientkant alleen als hint. Lengte telt het meest, en de server beslist wat hij accepteert.
Log de waarde van het veld nooit en stuur die tijdens het debuggen nooit naar analytics.
Veelgestelde vragen
Hoe verberg ik een wachtwoord in React Native?
Zet secureTextEntry op de TextInput. De documentatie zegt dat het de tekst onleesbaar maakt zodat wachtwoorden veilig blijven, standaard false is, en niet werkt als multiline op true staat.
Hoe voeg ik een knop toe om het wachtwoord te tonen?
Houd een boolean hidden in state, geef die door aan secureTextEntry, en render naast het veld een Pressable die hem omzet. Geef de knop een label, zodat schermlezers aankondigen wat een druk erop doet.
Waarom biedt iOS bij aanmelden geen sterk wachtwoord aan?
Zet textContentType="newPassword" op het veld. Met die waarde kunt u ook passwordRules meegeven, geschreven in de syntax voor wachtwoordregels van Apple, zodat het gegenereerde wachtwoord aan uw eisen voldoet.
Welke autoComplete-waarde moet een wachtwoordveld gebruiken?
"password" waar iemand een bestaand wachtwoord typt en "new-password" waar iemand er een aanmaakt. Beide staan tussen de autoComplete-waarden die op beide platforms werken.
Autofill op beide platforms
autoComplete is de hint die beide platforms lezen, terwijl textContentType alleen voor iOS is en het veld koppelt aan de sleutelhanger van het apparaat. Beide instellen kost niets en dekt meer wachtwoordbeheerders.
Combineer het wachtwoordveld met een gebruikersnaam- of e-mailveld met autoComplete="username" of "email", zodat de beheerder weet bij welk account het wachtwoord hoort.
Wat de sterktemeter meet
De meter op deze pagina telt lengte en de soorten gebruikte tekens: kleine letters, hoofdletters, cijfers en symbolen. Het is een snel duwtje, geen audit, en hij herkent geen wachtwoord dat veelgebruikt of al gelekt is.
Lange wachtzinnen scoren hier goed, omdat drie van de vier punten uit lengte komen en maar één uit het mengen van tekensoorten. Combineer de meter met een controle op minimale lengte in uw validatie.
Code voor het wachtwoordveld
PasswordInput met een toonknop
Geef isNew mee voor aanmeldschermen. Het knoplabel beschrijft altijd wat de volgende druk doet.
Functie voor de sterktescore
Geeft 1 tot 4 terug voor elke niet-lege string. Koppel het getal aan een label en een balkbreedte.