Ich habe zwei TextInput-Felder wie folgt definiert:
<TextInput
style = {styles.titleInput}
returnKeyType = {"next"}
autoFocus = {true}
placeholder = "Title" />
<TextInput
style = {styles.descriptionInput}
multiline = {true}
maxLength = {200}
placeholder = "Description" />
Nach dem Drücken der Schaltfläche "Weiter" auf meiner Tastatur springt meine reaktionsnative App jedoch nicht zum zweiten TextInput-Feld. Wie kann ich das erreichen?
Vielen Dank!
ios
react-native
andreaswienes
quelle
quelle
v16.8.0
oder höher würde ich die Antwort von @Eli Johnson unten empfehlen. React hat viele Verwendungen derref
in den folgenden Lösungen bereitgestellten abgelehnt .Antworten:
Stellen Sie den zweiten
TextInput
Fokus, wenn der vorherigeTextInput
‚sonSubmitEditing
ausgelöst wird.Versuche dies
Hinzufügen eines Verweises zum zweiten TextInput
ref={(input) => { this.secondTextInput = input; }}
Binden Sie die Fokusfunktion an das erste onSubmitEditing -Ereignis von TextInput.
onSubmitEditing={() => { this.secondTextInput.focus(); }}
Denken Sie daran, blurOnSubmit auf false zu setzen, um ein Flackern der Tastatur zu verhindern.
blurOnSubmit={false}
quelle
onSubmitEditing
Rückruf nach demblur
Ereignis aufgerufen wird . Die Tastatur kann also verrückt werden, wenn sie sich sofort auf das nächste Element konzentriert. Daher kann es hilfreich sein,blurOnSubmit={false}
alle Elemente in der Form festzulegen, aber dastrue
letzte Element beizubehalten, damit die Schaltfläche Fertig die letzte Eingabe verwischen kann.blurOnSubmit={false}
ein Flackern der Tastatur zu verhindern, funktioniert dies nicht mehr. Wer weiß, was los ist?focus
Arbeit zu leisten , sicher, dass Sie keinen Wrapper fürTextInput
Komponenten verwenden. Wenn Sie eine Say-CustomTextInput
Komponente haben, die umbrochen wirdTextInput
, müssen SieTextInput
Unschärfe- und Fokusmethoden für diese Komponente implementieren , damit sie wie erwartet funktioniert.Sie können dies ohne Verwendung von Refs tun . Dieser Ansatz wird bevorzugt, da Refs zu fragilem Code führen können . In den React-Dokumenten wird empfohlen, nach Möglichkeit andere Lösungen zu finden:
Stattdessen verwenden wir eine Statusvariable, um das zweite Eingabefeld zu fokussieren.
Fügen Sie eine Statusvariable hinzu, die wir als Requisite an folgende Adresse übergeben
DescriptionInput
:Definieren Sie eine Handler-Methode, die diese Statusvariable auf true setzt:
Nach dem Absenden / Drücken von Enter / Next am
TitleInput
rufen wir anhandleTitleInputSubmit
. Dies wirdfocusDescriptionInput
auf true gesetzt.DescriptionInput
Diefocus
Requisite wird auf unserefocusDescriptionInput
Zustandsvariable gesetzt. Wenn alsofocusDescriptionInput
Änderungen (in Schritt 3)DescriptionInput
mit neu gerendert werdenfocus={true}
.Dies ist ein guter Weg, um die Verwendung von Refs zu vermeiden, da Refs zu fragilerem Code führen können :)
EDIT: h / t an @LaneRettig, um darauf hinzuweisen, dass Sie den React Native TextInput mit einigen zusätzlichen Requisiten und Methoden umschließen müssen, damit er auf Folgendes reagiert
focus
:quelle
Ab React Native 0.36 wird das Aufrufen
focus()
(wie in mehreren anderen Antworten vorgeschlagen) eines Texteingabeknotens nicht mehr unterstützt. Stattdessen können Sie dasTextInputState
Modul von React Native verwenden. Ich habe das folgende Hilfsmodul erstellt, um dies zu vereinfachen:Sie können die
focusTextInput
Funktion dann für jede "Referenz" von a aufrufenTextInput
. Beispielsweise:quelle
<Field ... onSubmitEditing={() => focusTextInput(this._password)} />
und ref sollte so sein<Field ... withRef refName={e => this._password = e}/>
calling focus() on a text input node isn't supported any more
=> kühne Behauptung, Quelle? Das Aufrufenfocus()
funktioniert gut mit v0.49.5 +TextInputState
ist nicht dokumentiertfocus()
undblur()
wird erwähnt: facebook.github.io/react-native/releases/next/docs/…Ich habe eine kleine Bibliothek erstellt, die dies tut. Es ist keine Codeänderung erforderlich, außer dass Sie Ihre Umbruchansicht ersetzen und TextInput importieren:
https://github.com/zackify/react-native-autofocus
Hier ausführlich erklärt: https://zach.codes/autofocus-inputs-in-react-native/
quelle
Ich dachte, ich würde meine Lösung mit einer Funktionskomponente teilen ... ' das ' wird nicht benötigt!
Hier ist ein Beispiel meiner Komponente:
Ich weiß nicht, hoffe das hilft jemandem =)
quelle
Bei der Verwendung von react-native 0.45.1 sind auch Probleme beim Versuch aufgetreten, den Fokus auf ein Kennwort TextInput zu legen, nachdem die Eingabetaste für einen Benutzernamen TextInput gedrückt wurde.
Nachdem ich die meisten der am besten bewerteten Lösungen hier auf SO ausprobiert hatte, fand ich auf github eine Lösung, die meinen Anforderungen entsprach: https://github.com/shoutem/ui/issues/44#issuecomment-290724642
Etwas zusammenfassen:
Und dann benutze ich es so:
quelle
ref
ininputRef
... Sie könnten Ihre gesamte benutzerdefinierte Komponente löschen und Ihr zweiter Codeblock funktioniert so wie er ist, solange Sie wieder verwendenref
Für mich auf RN 0.50.3 ist dies folgendermaßen möglich:
Sie müssen this.PasswordInputRef sehen. _root .focus ()
quelle
Wenn Sie zufällig so verwenden
tcomb-form-native
wie ich, können Sie dies auch tun. Hier ist der Trick: Anstatt die Requisiten desTextInput
direkt zu setzen, machst du es überoptions
. Sie können sich auf die Felder des Formulars beziehen als:Das Endprodukt sieht also ungefähr so aus:
(Dank an remcoanker für die Veröffentlichung der Idee hier: https://github.com/gcanti/tcomb-form-native/issues/96 )
quelle
So habe ich es erreicht. Im folgenden Beispiel wurde die in React 16.3 eingeführte React.createRef () -API verwendet.
Ich denke, das wird dir helfen.
quelle
Mein Szenario ist <CustomBoladonesTextInput /> , das einen RN <TextInput /> umschließt .
Ich habe dieses Problem wie folgt gelöst:
Mein Formular sieht aus wie:
In der Komponentendefinition von CustomBoladonesTextInput übergebe ich das refField wie folgt an die innere ref-Requisite:
Und voila. Alles zurück funktioniert wieder. Hoffe das hilft
quelle
Probieren Sie diese Lösung bei GitHub-Problemen von React Native aus.
https://github.com/facebook/react-native/pull/2149#issuecomment-129262565
Sie müssen die Referenz für die TextInput-Komponente verwenden.
Dann müssen Sie eine Funktion erstellen, die für die onSubmitEditing-Requisite aufgerufen wird und den Fokus auf die zweite TextInput-Referenz verschiebt.
quelle
Mit Callback - Refs statt des Legacy - Zeichenfolge Refs:
quelle
Und fügen Sie die Methode
onSubmitEditing={() => this.focusTextInput(this.refs.password)}
wie folgt hinzu:quelle
Damit die akzeptierte Lösung funktioniert, wenn Sie
TextInput
sich in einer anderen Komponente befinden, müssen Sie die Referenzref
in den übergeordneten Container "einfügen" .quelle
in Ihrer Komponente:
Hinweis: Ich habe verwendet,
._root
weil es ein Verweis auf TextInput in ist NativeBase'Library 'Input handeltund in Ihren Texteingaben wie folgt
quelle
und Methode hinzufügen
quelle
Es gibt eine Möglichkeit, Registerkarten in a zu erfassen
TextInput
. Es ist hacky, aber besser als nichts .Definieren Sie einen
onChangeText
Handler, der den neuen Eingabewert mit dem alten vergleicht und nach a sucht\t
. Wenn eines gefunden wird, erweitern Sie das Feld wie in @boredgames gezeigtAngenommen, die Variable
username
enthält den Wert für den Benutzernamen undsetUsername
löst eine Aktion aus, um ihn im Speicher zu ändern (Komponentenstatus, Redux-Speicher usw.). Gehen Sie folgendermaßen vor:quelle
Hier eine Reagenzlösung für eine Eingabekomponente mit der Eigenschaft: focus.
Das Feld wird fokussiert, solange diese Requisite auf wahr gesetzt ist, und es wird nicht fokussiert, solange dies falsch ist.
Leider muss für diese Komponente ein: ref definiert sein. Ich konnte keinen anderen Weg finden, um .focus () darauf aufzurufen. Ich freue mich über Vorschläge.
https://gist.github.com/Knotschi/6f97efe89681ac149113ddec4c396cc5
quelle
swap!
einesatom
Typs möglich sind. Gemäß den Dokumenten wird dies für die Bindung an React verwendet: "Jede Komponente, die ein Atom verwendet, wird automatisch neu gerendert, wenn sich ihr Wert ändert." reaent-project.github.ioWenn Sie NativeBase als UI-Komponenten verwenden, können Sie dieses Beispiel verwenden
quelle