React Native TextInput: doorzoekbare naslag van props | We.Inc
Elke TextInput-prop die u nodig hebt, in één doorzoekbare tabel: multiline textarea, keyboardType, secureTextEntry, autoComplete, returnKeyType, submitBehavior en meer.
TextInput is het kerncomponent van React Native voor getypte tekst. Bewaar de waarde in state en werk die bij vanuit onChangeText, dat u de nieuwe string geeft. Voor een textarea zet u multiline op true en voegt u textAlignVertical: "top" toe, zodat Android overeenkomt met iOS. keyboardType, autoComplete en secureTextEntry bepalen het toetsenbord, de autofill-hint en het maskeren van wachtwoorden.
De officiële naslag is één lange alfabetische lijst. Deze pagina bevat de props waar mensen naar zoeken, met hun echte waarden en standaardwaarden, in een tabel die u kunt filteren op naam, waarde of platform. Typ multiline, password of android in het vak om de lijst te verkleinen.
Typ een woord in het filtervak: een propnaam, een waarde zoals decimal-pad, of een platform.
Rijen met een treffer ergens blijven zichtbaar; het getal onder het vak vertelt u hoeveel.
Lees de kolom met standaardwaarden voordat u een prop instelt; verschillende standaardwaarden verrassen mensen.
Kopieer de voorbeelden onder de tabel voor een textarea, een e-mailveld en een keten naar het volgende veld.
autoCapitalize staat standaard op sentences, dus zet het op none bij e-mail- en gebruikersnaamvelden.
secureTextEntry werkt niet samen met multiline; een wachtwoordveld moet één regel blijven.
inputMode gaat voor keyboardType als beide zijn ingesteld, dus kies er één.
maxLength stopt het typen bij de limiet, wat het flikkeren voorkomt van zelf de string inkorten in onChangeText.
Android tekent standaard een rand onderaan; underlineColorAndroid="transparent" haalt die weg.
Veelgestelde vragen
Hoe maak ik een textarea in React Native?
Er is geen apart textarea-component. Gebruik TextInput met multiline op true, geef het een hoogte of numberOfLines, en voeg textAlignVertical: "top" toe zodat de eerste regel op Android bovenaan begint, net als op iOS.
Waarom voegt de Return-toets een nieuwe regel toe in plaats van te verzenden?
Bij een multiline-veld staat submitBehavior standaard op "newline". Zet het op "submit" of "blurAndSubmit" als Return in plaats daarvan onSubmitEditing moet afvuren. Velden met één regel staan standaard op "blurAndSubmit".
Wat heeft blurOnSubmit vervangen?
submitBehavior. De documentatie markeert blurOnSubmit als verouderd, en submitBehavior gaat voor als beide aanwezig zijn.
Welke keyboardType-waarden werken op beide platforms?
default, number-pad, decimal-pad, numeric, email-address, phone-pad en url. Andere, zoals twitter en web-search op iOS of visible-password op Android, gelden maar voor één platform.
Controlled of uncontrolled
De meeste schermen geven value en onChangeText door, zodat state altijd bevat wat op het scherm staat en u het kunt valideren of herformatteren. defaultValue geeft een begintekst zonder elke toetsaanslag bij te houden, wat past bij een veld dat u maar één keer leest, bij het verzenden.
Gebruik een ref als u de focus moet verplaatsen. Door focus() aan te roepen op de ref van het volgende veld binnen onSubmitEditing krijgt u het bekende gedrag: tik op Return om omlaag door een formulier te gaan.
Toetsenborden en autofill
keyboardType verandert de toetsen die iemand ziet; het valideert nooit wat er getypt wordt. Een decimal-pad-veld kan nog steeds geplakte letters ontvangen, dus controleer de string voordat u hem opslaat.
autoComplete is de hint voor de autofill van het systeem op beide platforms, en textContentType is die voor alleen iOS. Door beide op inlogvelden te zetten, vullen opgeslagen wachtwoorden en eenmalige codes uit berichten zich op beide platforms in.
TextInput-voorbeelden
Een multiline textarea
textAlignVertical houdt de cursor op Android bovenaan, en het aantal tekens komt rechtstreeks uit state.
E-mailveld dat de focus naar het volgende veld verplaatst
returnKeyType="next" geeft de toets een label, en onSubmitEditing zet de focus op het wachtwoordveld via zijn ref.
TextInput-props, waarden en standaardwaarden
Prop
Waarden of type
Standaard
Platform
Wat het doet
value / onChangeText
string / (text) => void
Beide
Gecontroleerde tekst en de callback die elke nieuwe string ontvangt
defaultValue
Beide
Begintekst als u de waarde niet controleert
Beide
Hint die wordt getoond zolang het veld leeg is
placeholderTextColor
Beide
Kleur van de placeholdertekst
Beide
Staat meerdere regels toe; de textarea van React Native
numberOfLines
Beide
Maximaal aantal getoonde regels; op iOS alleen met de New Architecture