Wenn ich auf eine Texteingabe tippe, möchte ich in der Lage sein, auf eine andere Stelle zu tippen, um die Tastatur wieder zu schließen (allerdings nicht die Eingabetaste). Ich habe nicht die geringste Information dazu in allen Tutorials und Blog-Posts gefunden, die ich gelesen habe.
Dieses grundlegende Beispiel funktioniert bei mir mit React-Native 0.4.2 im Simulator immer noch nicht. Ich konnte es noch nicht auf meinem iPhone ausprobieren.
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js
</Text>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
<TextInput
style={{height: 40, borderColor: 'gray', borderWidth: 1}}
onEndEditing={this.clearFocus}
/>
</View>
react-native
TurboFish
quelle
quelle
Antworten:
Das Problem, dass die Tastatur nicht geschlossen wird, wird schwerwiegender
keyboardType='numeric'
, da dies nicht möglich ist.Das Ersetzen von View durch ScrollView ist keine korrekte Lösung. Wenn Sie mehrere
textInput
s oderbutton
s haben, wird durch Tippen auf diese bei aktivierter Tastatur nur die Tastatur geschlossen.Der richtige Weg besteht darin, View mit zu kapseln
TouchableWithoutFeedback
und aufzurufenKeyboard.dismiss()
BEARBEITEN: Sie können jetzt
ScrollView
mit verwendenkeyboardShouldPersistTaps='handled'
, um die Tastatur nur zu schließen, wenn das Tippen nicht von den untergeordneten Elementen ausgeführt wird (z. B. Tippen auf andere Texteingaben oder Schaltflächen).Wenn Sie haben
Ändern Sie es in
oder
BEARBEITEN: Sie können auch eine Komponente höherer Ordnung erstellen, um die Tastatur zu schließen.
Verwenden Sie es einfach so
HINWEIS: Dies
accessible={false}
ist erforderlich, damit das Eingabeformular weiterhin über VoiceOver zugänglich ist. Sehbehinderte werden es Ihnen danken!quelle
const DismissKeyboardHOC = (Comp) => {
onPress
fürTouchableWithoutFeedback
ganz gleich , zu Feuer , was ich versucheDies wurde gerade aktualisiert und dokumentiert ! Keine versteckten Tricks mehr.
https://github.com/facebook/react-native/pull/9925
quelle
Verwenden Sie dies für die benutzerdefinierte Entlassung
quelle
react-native-search-bar
Verwenden Sie React Native's
Keyboard.dismiss()
Aktualisierte Antwort
React Native hat die statische
dismiss()
Methode auf dem verfügbar gemachtKeyboard
, daher lautet die aktualisierte Methode:Ursprüngliche Antwort
Verwenden Sie die React Native-
dismissKeyboard
Bibliothek.Ich hatte ein sehr ähnliches Problem und fühlte mich als der einzige, der es nicht bekam.
ScrollViews
Wenn Sie eine
ScrollView
haben oder etwas, das wie eine davon erbtListView
, können Sie eine Requisite hinzufügen, die die Tastatur automatisch aufgrund von Drücken oder Ziehen von Ereignissen schließt.Die Stütze ist
keyboardDismissMode
und kann einen Wert vonnone
,interactive
oderon-drag
. Mehr dazu lesen Sie hier .Regelmäßige Ansichten
Wenn Sie etwas anderes als a haben
ScrollView
und möchten, dass durch Drücken die Tastatur geschlossen wird, können Sie eine einfache verwendenTouchableWithoutFeedback
undonPress
die Dienstprogrammbibliothek von React Native verwendendismissKeyboard
, um die Tastatur für Sie zu schließen.In Ihrem Beispiel könnten Sie Folgendes tun:
Hinweis: Sie
TouchableWithoutFeedback
können nur ein einziges Kind haben, daher müssen Sie alles darunterView
wie oben gezeigt in ein einziges einwickeln .quelle
dismiss()
Methode auf der Tastatur verfügbar gemacht, daher lautet die aktualisierte Methode :import { Keyboard } from 'react-native'; Keyboard.dismiss()
.Keyboard.dismiss()
wird nichts unternommen, da die Implementierung davon abhängt, dass ich mich auf eine Eingabe konzentriere, die ich nicht mehr bin.Die einfache Antwort besteht darin, eine ScrollView anstelle von View zu verwenden und die scrollbare Eigenschaft auf false zu setzen (möglicherweise muss jedoch das Styling angepasst werden).
Auf diese Weise wird die Tastatur geschlossen, sobald ich auf eine andere Stelle tippe. Dies kann ein Problem mit React-Native sein, aber Tap-Ereignisse scheinen nur mit ScrollViews behandelt zu werden, was zu dem beschriebenen Verhalten führt.
Edit: Danke an jllodra. Bitte beachten Sie, dass die Tastatur immer noch nicht ausgeblendet wird, wenn Sie direkt auf einen anderen Texteingang und dann außerhalb tippen.
quelle
Sie können wie unten beschrieben aus React-Native importieren :
keyboard
und in Ihrem Code könnte so etwas sein:
quelle
static dismiss()
. Ich habe geradeKeyboard.dismiss()
meine onSubmit-Methode hinzugefügt (woonSubmitEditing={() => {this.onSubmit()}})
Ich bin brandneu bei React und bin beim Erstellen einer Demo-App auf genau dasselbe Problem gestoßen. Wenn Sie die
onStartShouldSetResponder
Requisite ( hier beschrieben ) verwenden, können Sie einen einfachen alten berührenReact.View
. Neugierig auf die Gedanken erfahrener Leser zu dieser Strategie / wenn es eine bessere gibt, aber das hat bei mir funktioniert:2 Dinge, die hier zu beachten sind. Erstens gibt es, wie hier erläutert , noch keine Möglichkeit, die Bearbeitung aller Unteransichten zu beenden. Daher müssen wir uns
TextInput
direkt auf die beziehen , um sie zu verwischen. Zweitens wird dasonStartShouldSetResponder
von anderen berührbaren Bedienelementen abgefangen. Wenn Sie also in der Containeransicht auf einTouchableHighlight
etc (einschließlich eines anderenTextInput
) klicken, wird das Ereignis nicht ausgelöst. Wenn Sie jedochImage
in der Containeransicht auf eine klicken , wird die Tastatur weiterhin geschlossen.quelle
Verwenden Sie
ScrollView
anstelle vonView
und setzen Sie daskeyboardShouldPersistTaps
Attribut auf false.quelle
keyboardShouldPersistTaps
Attribut bei Verwendung von a standardmäßig falseScrollView
. Ich habe gerade mein React-Native auf die neueste Version aktualisiert und das Problem beim Umschalten auf eine Sekunde bestehtTextInput
weiterhin. Die Tastatur ist dann nicht entlassbar. Haben Sie eine Lösung für dieses spezielle Problem gefunden?keyboardShouldPersistTaps
das Warum ist es hier relevant? Vielen DankWenn jemand ein funktionierendes Beispiel dafür benötigt, wie eine mehrzeilige Texteingabe hier verworfen werden kann, dann geht's los! Ich hoffe, dies hilft einigen Leuten da draußen. In den Dokumenten wird keine Möglichkeit beschrieben, eine mehrzeilige Eingabe zu verwerfen. Zumindest gab es keinen konkreten Hinweis darauf, wie dies zu tun ist. Es ist immer noch ein Noob, hier auf dem Stapel zu posten. Wenn jemand der Meinung ist, dass dies ein Verweis auf den tatsächlichen Post sein sollte, für den dieses Snippet geschrieben wurde, lass es mich wissen.
quelle
Aktualisierte Verwendung von
ScrollView
fürReact Native 0.39
Es gibt jedoch immer noch ein Problem mit zwei
TextInput
Boxen. z.B. Ein Benutzername und ein Passwort würden jetzt die Tastatur beim Umschalten zwischen den Eingaben schließen. Würde gerne ein paar Vorschläge bekommen, um die Tastatur am Leben zu erhalten, wenn Sie zwischen wechseln,TextInputs
während Sie eine verwendenScrollView
.quelle
0.40
AktualisierungenkeyboardShouldPersistTaps
von aboolean
auf aenum
mit dem möglichen Wert "behandelt" erfolgen, um dies zu beheben.Es gibt verschiedene Möglichkeiten, wie
onPress
Sie Ereignisse steuern können:Wenn Sie die Tastatur beim Scrollen schließen möchten:
Weitere Optionen sind, wenn der Benutzer außerhalb der Tastatur klickt:
quelle
Ansatz Nr. 2;
Dank user @ ricardo-stuven für diesen Hinweis gibt es eine andere bessere Möglichkeit, die Tastatur zu schließen, die Sie im Beispiel in den reaktiven nativen Dokumenten sehen können.
Einfacher Import
Keyboard
und Aufruf der Methodedismiss()
quelle
Das Einwickeln Ihrer Komponenten in a
TouchableWithoutFeedback
kann zu seltsamem Bildlaufverhalten und anderen Problemen führen. Ich ziehe es vor, meine oberste App in eineView
mit deronStartShouldSetResponder
ausgefüllten Eigenschaft zu verpacken . Dadurch kann ich alle nicht behandelten Berührungen verarbeiten und dann die Tastatur schließen. Da die Handlerfunktion false zurückgibt, wird das Berührungsereignis wie gewohnt weitergegeben.quelle
Ich habe dies gerade mit der neuesten React Native-Version (0.4.2) getestet, und die Tastatur wird geschlossen, wenn Sie auf eine andere Stelle tippen.
Und zu Ihrer Information: Sie können eine Rückruffunktion festlegen, die ausgeführt werden soll, wenn Sie die Tastatur schließen, indem Sie sie der Requisite "onEndEditing" zuweisen.
quelle
Wenn ich mich nicht irre, hat die neueste Version von React Native dieses Problem gelöst, die Tastatur durch Tippen schließen zu können.
quelle
Wie wäre es mit einer berührbaren Komponente um / neben dem
TextInput
?quelle
Wickeln Sie Ihre gesamte Komponente ein mit:
Hat für mich gearbeitet
quelle
https://facebook.github.io/react-native/docs/keyboard.html
Verwenden
um die Tastatur zu verstecken.
quelle
Das Tastaturmodul wird zur Steuerung von Tastaturereignissen verwendet.
import { Keyboard } from 'react-native'
Fügen Sie den folgenden Code in die Rendermethode ein.
render() { return <TextInput onSubmitEditing={Keyboard.dismiss} />; }
Sie können verwenden -
quelle
Importieren Sie zuerst die Tastatur
Dann fügst
TextInput
du in deinemKeyboard.dismiss
dieonSubmitEditing
Requisite hinzu. Sie sollten etwas haben, das so aussieht:quelle
Mit
keyboardShouldPersistTaps
in derScrollView
Sie in „behandelt“ passieren kann, die sich mit den Fragen , die Leute sagen , kommt mit dem Scroll verwenden. Dies ist, was die Dokumentation über die Verwendung von "behandelt" sagt:the keyboard will not dismiss automatically when the tap was handled by a children, (or captured by an ancestor).
Hier wird darauf verwiesen.quelle
react-native-keyboard-aware-scroll-view
).in
ScrollView
GebrauchDies wird Ihren Job machen.
quelle
Es gibt viele Möglichkeiten, wie Sie damit umgehen können. Die obigen Antworten enthalten keine Informationen,
returnType
da sie zu diesem Zeitpunkt nicht in reag-native enthalten waren.1: Sie können es lösen, indem Sie Ihre Komponenten in ScrollView einbinden. Standardmäßig schließt ScrollView die Tastatur, wenn wir irgendwo drücken. Falls Sie jedoch ScrollView verwenden möchten, diesen Effekt jedoch deaktivieren möchten. Sie können pointerEvent prop verwenden, um eine Ansicht zu scrollen
pointerEvents = 'none'
.2: Wenn Sie die Tastatur per Tastendruck schließen möchten, können Sie einfach
Keyboard
von verwendenreact-native
import { Keyboard } from 'react-native' and inside onPress of that button, you can use
Keyboard.dismiss () '.3: Sie können die Tastatur auch schließen, wenn Sie auf die Eingabetaste auf der Tastatur klicken. HINWEIS: Wenn Ihr Tastaturtyp numerisch ist, haben Sie keine Eingabetaste. Sie können es also aktivieren, indem Sie ihm eine Requisite mit dem Namen returnKeyType geben
done
. oder Sie könnten verwendenonSubmitEditing={Keyboard.dismiss}
, es wird aufgerufen, wenn wir die Eingabetaste drücken. Und wenn Sie die Tastatur schließen möchten, wenn Sie den Fokus verlieren, können Sie onBlur prop verwenden.onBlur = {Keyboard.dismiss}
quelle
Keyboard.dismiss()
werde es tun. Aber manchmal kann es den Fokus verlieren und die Tastatur kann den Ref nicht finden. Am konsistentesten ist es, aref=_ref
in den textInput einzufügen und dies zu tun,_ref.blur()
wenn Sie es schließen müssen und_ref.focus()
wenn Sie die Tastatur zurückbringen müssen.quelle
ausprobieren
keyboard.dismiss()
. Es hat bei mir funktioniertquelle
Hier ist meine Lösung für das Entlassen der Tastatur und das Scrollen zu getipptem TextInput (ich verwende ScrollView mit der TastaturDismissMode-Requisite):
Verwendungszweck:
quelle
Verwenden Sie dieses Paket
react-native-keyboard-aware-scroll-view
Verwenden Sie diese Komponente als Stammkomponente
Da dieses Paket
react-native-keyboard-aware-scroll-view
auch eine scrollView hat, müssen Sie diese hinzufügen:<KeyboardAwareScrollView keyboardShouldPersistTaps="handled"> <ScrollView keyboardShouldPersistTaps="handled"></ScrollView> </KeyboardAwareScrollView>
quelle