React Native TextInput: przegląd propsów z wyszukiwarką | We.Inc
Wszystkie propsy TextInput, po które sięgasz, w jednej tabeli z wyszukiwarką: wielowierszowe textarea, keyboardType, secureTextEntry, autoComplete, returnKeyType, submitBehavior i więcej.
TextInput to podstawowy komponent React Native do wpisywania tekstu. Trzymaj jego wartość w stanie i aktualizuj ją w onChangeText, który przekazuje Ci nowy tekst. Aby uzyskać textarea, ustaw multiline na true i dodaj textAlignVertical: "top", aby Android działał tak jak iOS. keyboardType, autoComplete i secureTextEntry wybierają klawiaturę, podpowiedź autouzupełniania i maskowanie hasła.
Oficjalna dokumentacja to jedna długa alfabetyczna lista. Ta strona zawiera te propsy, których ludzie szukają, z prawdziwymi wartościami i domyślnymi ustawieniami, w tabeli, którą możesz filtrować po nazwie, wartości lub platformie. Wpisz w pole multiline, password lub android, aby zawęzić wyniki.
Wpisz słowo w polu filtra: nazwę propsa, wartość taką jak decimal-pad albo platformę.
Wiersze, które pasują w dowolnym miejscu, pozostają widoczne; licznik pod polem pokazuje ich liczbę.
Zanim ustawisz props, przeczytaj kolumnę z wartością domyślną; kilka wartości domyślnych zaskakuje.
Skopiuj przykłady pod tabelą: textarea, pole e-mail i łańcuch przechodzenia do następnego pola.
autoCapitalize domyślnie ma wartość sentences, więc w polach e-mail i nazwy użytkownika ustaw none.
secureTextEntry nie działa razem z multiline; pole hasła musi pozostać jednowierszowe.
inputMode ma pierwszeństwo przed keyboardType, gdy ustawione są oba, więc wybierz jeden.
maxLength zatrzymuje wpisywanie na limicie, co pozwala uniknąć migotania przy samodzielnym przycinaniu tekstu w onChangeText.
Android domyślnie rysuje dolną krawędź; underlineColorAndroid="transparent" ją usuwa.
Najczęściej zadawane pytania
Jak zrobić textarea w React Native?
Nie ma osobnego komponentu textarea. Użyj TextInput z multiline ustawionym na true, nadaj mu wysokość lub numberOfLines i dodaj textAlignVertical: "top", aby na Androidzie pierwszy wiersz zaczynał się u góry, tak jak na iOS.
Dlaczego klawisz Return dodaje nowy wiersz zamiast wysyłać?
W polu wielowierszowym submitBehavior domyślnie ma wartość "newline". Ustaw "submit" lub "blurAndSubmit", jeśli Return ma zamiast tego wywoływać onSubmitEditing. Pola jednowierszowe domyślnie używają "blurAndSubmit".
Co zastąpiło blurOnSubmit?
submitBehavior. Dokumentacja oznacza blurOnSubmit jako przestarzały, a submitBehavior go nadpisuje, gdy oba są obecne.
Które wartości keyboardType działają na obu platformach?
default, number-pad, decimal-pad, numeric, email-address, phone-pad i url. Inne, takie jak twitter i web-search na iOS czy visible-password na Androidzie, dotyczą tylko jednej platformy.
Kontrolowane czy niekontrolowane
Większość ekranów przekazuje value i onChangeText, więc stan zawsze zawiera to, co widać na ekranie, i możesz to walidować lub formatować. defaultValue podaje tekst początkowy bez śledzenia każdego naciśnięcia klawisza, co pasuje do pola odczytywanego tylko raz, przy wysyłaniu.
Sięgnij po ref, gdy musisz przenieść fokus. Wywołanie focus() na refie następnego pola wewnątrz onSubmitEditing daje znane zachowanie: naciśnij Return, aby przejść niżej w formularzu.
Klawiatury i autouzupełnianie
keyboardType zmienia klawisze, które widzi użytkownik; nigdy nie waliduje tego, co wpisuje. Do pola decimal-pad nadal można wkleić litery, więc sprawdź tekst przed zapisaniem.
autoComplete to wieloplatformowa podpowiedź dla systemowego autouzupełniania, a textContentType to podpowiedź tylko dla iOS. Ustawienie obu w polach logowania pozwala uzupełniać zapisane hasła i jednorazowe kody z wiadomości na obu platformach.
Przykłady TextInput
Wielowierszowe textarea
textAlignVertical utrzymuje kursor u góry na Androidzie, a licznik znaków odczytuje wartość prosto ze stanu.
Pole e-mail, które przenosi fokus do następnego pola
returnKeyType="next" ustawia etykietę klawisza, a onSubmitEditing przenosi fokus do pola hasła przez jego ref.
Propsy TextInput, wartości i ustawienia domyślne
Props
Wartości lub typ
Domyślnie
Platforma
Co robi
value / onChangeText
string / (text) => void
Obie
Kontrolowany tekst i callback, który otrzymuje każdy nowy tekst
defaultValue
Obie
Tekst początkowy, gdy nie kontrolujesz wartości
Obie
Podpowiedź widoczna, gdy pole jest puste
placeholderTextColor
Obie
Kolor tekstu placeholdera
Obie
Pozwala na kilka wierszy; textarea w React Native
numberOfLines
Obie
Maksymalna liczba wyświetlanych wierszy; na iOS tylko z New Architecture