Zdefiniowałem dwa pola TextInput w następujący sposób:
<TextInput
style = {styles.titleInput}
returnKeyType = {"next"}
autoFocus = {true}
placeholder = "Title" />
<TextInput
style = {styles.descriptionInput}
multiline = {true}
maxLength = {200}
placeholder = "Description" />
Ale po naciśnięciu przycisku „Dalej” na klawiaturze moja reagująca aplikacja nie przeskakuje do drugiego pola TextInput. Jak mogę to osiągnąć?
Dzięki!
ios
react-native
andreaswienes
źródło
źródło
v16.8.0
lub wyższym polecam odpowiedź udzieloną przez @Eli Johnson na samym dole. React wycofał wiele zastosowańref
dostarczonych w poniższych rozwiązaniach.Odpowiedzi:
Ustaw drugą
TextInput
ostrość, gdy poprzedniaTextInput
„sonSubmitEditing
jest wyzwalany.Spróbuj tego
Dodanie odwołania do drugiego TextInput
ref={(input) => { this.secondTextInput = input; }}
Powiąż funkcję fokusa z pierwszym zdarzeniem onSubmitEditing TextInput .
onSubmitEditing={() => { this.secondTextInput.focus(); }}
Pamiętaj, aby ustawić blurOnSubmit na false, aby zapobiec migotaniu klawiatury.
blurOnSubmit={false}
źródło
onSubmitEditing
wywołanie zwrotne jest wywoływane poblur
zdarzeniu. Klawiatura może więc zwariować, jeśli natychmiast skoncentruje się na następnym elemencie. Pomocne może być ustawienieblurOnSubmit={false}
wszystkich elementów w formie, ale pozostawienietrue
na ostatnim elemencie, aby przycisk Gotowe mógł zatrzeć ostatnie wejście.blurOnSubmit={false}
aby zapobiec migotaniu klawiatury, spowodowało, że przestało to działać, ktoś wie, co się dzieje?focus
pracy, upewnij się, że nie używasz opakowania dlaTextInput
komponentu. Jeśli maszCustomTextInput
komponent say , który się zawijaTextInput
, musisz zaimplementowaćTextInput
metody rozmycia i fokusa dla tego komponentu, aby działał zgodnie z oczekiwaniami.Możesz to zrobić bez użycia referencji . Takie podejście jest preferowane, ponieważ referencje mogą prowadzić do kruchego kodu . Dokumenty React zalecają znalezienie innych rozwiązań tam, gdzie to możliwe:
Zamiast tego użyjemy zmiennej stanu do skupienia drugiego pola wejściowego.
Dodaj zmienną stanu, którą przekażemy jako rekwizyt do
DescriptionInput
:Zdefiniuj metodę modułu obsługi, która ustawi tę zmienną stanu na true:
Po przesłaniu / naciśnięciu enter / next na
TitleInput
, zadzwonimyhandleTitleInputSubmit
. To ustawi sięfocusDescriptionInput
na true.DescriptionInput
„sfocus
prop jest ustawiona na naszejfocusDescriptionInput
zmiennej stanu. Tak więc, gdyfocusDescriptionInput
zmiany (w kroku 3)DescriptionInput
zostaną ponownie renderowane za pomocąfocus={true}
.Jest to dobry sposób na uniknięcie używania referencji, ponieważ referencje mogą prowadzić do bardziej delikatnego kodu :)
EDYCJA: h / t do @LaneRettig za wskazanie, że musisz owinąć React Native TextInput kilkoma dodanymi rekwizytami i metodami, aby uzyskać odpowiedź na
focus
:źródło
Począwszy od wersji React Native 0.36, wywoływanie
focus()
(jak sugerowano w kilku innych odpowiedziach) w węźle wprowadzania tekstu nie jest już obsługiwane. Zamiast tego możesz użyćTextInputState
modułu z React Native. Stworzyłem następujący moduł pomocniczy, aby to ułatwić:Możesz wtedy wywołać
focusTextInput
funkcję w dowolnym „ref” zTextInput
. Na przykład:źródło
<Field ... onSubmitEditing={() => focusTextInput(this._password)} />
i ref powinno być tak<Field ... withRef refName={e => this._password = e}/>
calling focus() on a text input node isn't supported any more
=> śmiałe roszczenie, źródło? Wywoływaniefocus()
działa dobrze z wersją 0.49.5 +,TextInputState
nie jest do tej pory udokumentowanefocus()
iblur()
jest wspomniane: facebook.github.io/react-native/releases/next/docs/…Utworzyłem małą bibliotekę, która to robi, nie wymaga zmiany kodu poza zastąpieniem widoku opakowania i importem TextInput:
https://github.com/zackify/react-native-autofocus
Szczegółowo wyjaśniono tutaj: https://zach.codes/autofocus-inputs-in-react-native/
źródło
Myślałem, że podzielę się moim rozwiązaniem za pomocą komponentu funkcyjnego ... „ to ” nie jest potrzebne!
Oto przykład mojego komponentu:
Nie wiem, mam nadzieję, że to komuś pomoże =)
źródło
Używając Reaktywny natywny 0.45.1 Napotkałem również problemy przy ustawianiu ostrości na hasło TextInput po naciśnięciu klawisza Return na nazwie użytkownika TextInput.
Po wypróbowaniu większości najwyżej ocenianych rozwiązań tutaj na SO znalazłem rozwiązanie na github, które spełniło moje potrzeby: https://github.com/shoutem/ui/issues/44#issuecomment-290724642
Podsumowując:
A potem używam tego w ten sposób:
źródło
ref
nainputRef
... Możesz upuścić cały niestandardowy komponent, a Twój drugi blok kodu będzie działał w niezmienionej postaci, dopóki powrócisz do używaniaref
Dla mnie na RN 0.50.3 jest to możliwe w ten sposób:
Musisz zobaczyć this.PasswordInputRef. _root .focus ()
źródło
Jeśli używasz tak
tcomb-form-native
jak ja, możesz to zrobić. Oto sztuczka: zamiast ustawiać rekwizytyTextInput
bezpośrednio, robisz to za pośrednictwemoptions
. Możesz odnieść się do pól formularza jako:Tak więc produkt końcowy wygląda mniej więcej tak:
(Podziękowania dla remcoanker za opublikowanie pomysłu tutaj: https://github.com/gcanti/tcomb-form-native/issues/96 )
źródło
Tak to osiągnąłem. W poniższym przykładzie wykorzystano interfejs API React.createRef () wprowadzony w React 16.3.
Myślę, że to ci pomoże.
źródło
Mój scenariusz to <CustomBoladonesTextInput /> zawijanie RN <TextInput /> .
Rozwiązałem ten problem w następujący sposób:
Mój formularz wygląda następująco:
W definicji komponentu CustomBoladonesTextInput przekazuję refField do wewnętrznego rekwizytu ref:
I voila. Wszystko wróci do normy. Mam nadzieję że to pomoże
źródło
Wypróbuj to rozwiązanie w przypadku problemów z GitHub React Native.
https://github.com/facebook/react-native/pull/2149#issuecomment-129262565
Musisz użyć prop prop dla komponentu TextInput.
Następnie potrzebujesz utworzyć funkcję, która zostanie wywołana na prop onSubmitEditing, który przenosi fokus na drugie odwołanie TextInput.
źródło
Używanie odwołań zwrotnych zamiast odwołań do starszego ciągu:
źródło
I dodaj metodę
onSubmitEditing={() => this.focusTextInput(this.refs.password)}
jak poniżej:źródło
Aby zaakceptowane rozwiązanie działało, jeśli
TextInput
znajdujesz się w innym składniku, musisz „pop” referencję zref
kontenera nadrzędnego.źródło
w twoim komponencie:
Uwaga: Użyłem,
._root
ponieważ jest to odwołanie do TextInput w danych wejściowych NativeBase'Library 'i podczas wprowadzania tekstu w ten sposób
źródło
i dodaj metodę
źródło
Istnieje sposób na przechwytywanie kart w pliku
TextInput
. Jest zuchwały, ale lepszy niż nic .Zdefiniuj
onChangeText
moduł obsługi, który porównuje nową wartość wejściową ze starą, sprawdzając, czy\t
. Jeśli zostanie znaleziony, przesuń pole, jak pokazano na @boredgamesZakładając, że zmienna
username
zawiera wartość nazwy użytkownika isetUsername
wywołuje akcję zmieniającą ją w sklepie (stan komponentu, magazyn redux itp.), Wykonaj coś takiego:źródło
Tutaj odczynnik dla składnika wejściowego, który ma właściwość: focus.
Pole będzie skupione tak długo, jak długo ten rekwizyt będzie ustawiony na true i nie będzie się skupiać tak długo, jak będzie to fałszywe.
Niestety ten komponent musi mieć zdefiniowane: ref, nie mogłem znaleźć innego sposobu na wywołanie .focus (). Cieszę się z sugestii.
https://gist.github.com/Knotschi/6f97efe89681ac149113ddec4c396cc5
źródło
swap!
w sprawieatom
rodzaju. Zgodnie z dokumentacją służy to do powiązania z React: „Każdy komponent wykorzystujący atom jest automatycznie renderowany ponownie, gdy zmienia się jego wartość”. reagent-project.github.ioJeśli używasz NativeBase jako składników interfejsu użytkownika, możesz użyć tej próbki
źródło