Tastatur in React-Native ausblenden

448

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>
TurboFish
quelle
3
Versuchen Sie blur (): github.com/facebook/react-native/issues/113
herbertD
Die richtige Antwort sollte die von Eric Kim unten sein. Die ScrollView-Antwort (scrollbar auf false setzen) ist nicht ideal. Wenn Sie mehrere Texteingaben haben, können Sie nicht von der Texteingabe zur Texteingabe springen, ohne dass die Tastatur geschlossen wird.
Hippofluff
2
Für diejenigen, die eine Lösung für die gesamte App wünschen, siehe @ Scottmas Antwort unten. (Link: stackoverflow.com/a/49825223/1138273 )
Hamed

Antworten:

562

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 textInputs oder buttons haben, wird durch Tippen auf diese bei aktivierter Tastatur nur die Tastatur geschlossen.

Der richtige Weg besteht darin, View mit zu kapseln TouchableWithoutFeedbackund aufzurufenKeyboard.dismiss()

BEARBEITEN: Sie können jetzt ScrollViewmit verwenden keyboardShouldPersistTaps='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

<View style={{flex: 1}}>
    <TextInput keyboardType='numeric'/>
</View>

Ändern Sie es in

<ScrollView contentContainerStyle={{flexGrow: 1}}
  keyboardShouldPersistTaps='handled'
>
  <TextInput keyboardType='numeric'/>
</ScrollView>

oder

import {Keyboard} from 'react-native'

<TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
    <View style={{flex: 1}}>
        <TextInput keyboardType='numeric'/>
    </View>
</TouchableWithoutFeedback>

BEARBEITEN: Sie können auch eine Komponente höherer Ordnung erstellen, um die Tastatur zu schließen.

import React from 'react';
import { TouchableWithoutFeedback, Keyboard, View } from 'react-native';

const DismissKeyboardHOC = (Comp) => {
  return ({ children, ...props }) => (
    <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
      <Comp {...props}>
        {children}
      </Comp>
    </TouchableWithoutFeedback>
  );
};
const DismissKeyboardView = DismissKeyboardHOC(View)

Verwenden Sie es einfach so

...
render() {
    <DismissKeyboardView>
        <TextInput keyboardType='numeric'/>
    </DismissKeyboardView>
}

HINWEIS: Dies accessible={false}ist erforderlich, damit das Eingabeformular weiterhin über VoiceOver zugänglich ist. Sehbehinderte werden es Ihnen danken!

Eric Kim
quelle
28
Das ist großartig. Der einzige Kommentar, den ich habe, ist, dass Sie die offizielle Keyboard-API in RN hätten verwenden und Keyboard.dismiss () aufrufen können, anstatt ein internes RN-Dienstprogramm zu rufen. EntKeyboard (). Aber beide funktionieren derzeit gut.
Pavle Lekic
@PavleLekic Entschuldigung für die Verzögerung, ich habe die Antwort zusammen mit der HOC-Methode aktualisiert
Eric Kim
3
Das funktioniert super. Ich musste die Syntax für die Definition der const DismissKeyboardHOC = (Comp) => {
Pfeilfunktion
2
Ich kann nicht onPressfür TouchableWithoutFeedbackganz gleich , zu Feuer , was ich versuche
Brad Ryan
1
Warum ein HoC erstellen und dieses einfach im Stammverzeichnis Ihres App-Baums hinzufügen /
Dimitri Kopriwa
248

Dies wurde gerade aktualisiert und dokumentiert ! Keine versteckten Tricks mehr.

import { Keyboard } from 'react-native'

// Hide that keyboard!
Keyboard.dismiss()

https://github.com/facebook/react-native/pull/9925

Gant Laborde
quelle
4
Vielen Dank für das Hinzufügen. Ich hoffe, Ihre Antwort sprudelt nach oben. Ich habe es fast verpasst und eine veraltete Lösung verwendet.
Schäferhund
2
Pinging @MrMuetze, um dies als die richtige Antwort zu ändern
jehna1
8
Dies sollte nicht die beste Antwort sein. In der Frage wird gefragt, wie die Tastatur beim Tippen außerhalb der Tastatur geschlossen werden soll. Diese Antwort bietet lediglich eine API dafür, während die tatsächlich beste Antwort eine funktionsfähige Implementierung bietet.
Jskidd3
Sie können die nächste Bibliothek verwenden: KeyboardAwareScrollView
Alejandro Gonzalez
97

Verwenden Sie dies für die benutzerdefinierte Entlassung

var dismissKeyboard = require('dismissKeyboard');

var TestView = React.createClass({
    render: function(){
        return (
            <TouchableWithoutFeedback 
                onPress={dismissKeyboard}>
                <View />
            </TouchableWithoutFeedback>
        )
    }
})
Syarul
quelle
Es ist nicht dokumentiert, aber die Samples im reaktionsnativen Github-Repo verwenden es einige Male.
Syarul
7
Interessant für diejenigen, die neugierig sind, woher dies kommt, ist es eine Utility-Bibliothek in React Native. Hier ist die Quelle: github.com/facebook/react-native/blob/master/Libraries/…
Joshua Pinter
1
Aus irgendeinem Grund hat es nicht funktioniert, als ich es mitreact-native-search-bar
Peter G.
Dies ist das genaue Äquivalent zu Keyboard.dismiss, das vorzuziehen ist, da es dokumentiert ist. github.com/facebook/react-native/blob/…
Ricardo Stuven
88

Verwenden Sie React Native's Keyboard.dismiss()

Aktualisierte Antwort

React Native hat die statische dismiss()Methode auf dem verfügbar gemacht Keyboard, daher lautet die aktualisierte Methode:

import { Keyboard } from 'react-native'; 

Keyboard.dismiss()

Ursprüngliche Antwort

Verwenden Sie die React Native- dismissKeyboardBibliothek.

Ich hatte ein sehr ähnliches Problem und fühlte mich als der einzige, der es nicht bekam.

ScrollViews

Wenn Sie eine ScrollViewhaben oder etwas, das wie eine davon erbt ListView, 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 keyboardDismissModeund kann einen Wert von none, interactiveoder on-drag. Mehr dazu lesen Sie hier .

Regelmäßige Ansichten

Wenn Sie etwas anderes als a haben ScrollViewund möchten, dass durch Drücken die Tastatur geschlossen wird, können Sie eine einfache verwenden TouchableWithoutFeedbackund onPressdie Dienstprogrammbibliothek von React Native verwenden dismissKeyboard, um die Tastatur für Sie zu schließen.

In Ihrem Beispiel könnten Sie Folgendes tun:

var DismissKeyboard = require('dismissKeyboard'); // Require React Native's utility library.

// Wrap your view with a TouchableWithoutFeedback component like so.

<View style={styles.container}>

  <TouchableWithoutFeedback onPress={ () => { DismissKeyboard() } }>

    <View>

      <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}} />

    </View>

  </TouchableWithoutFeedback>

</View>

Hinweis: Sie TouchableWithoutFeedbackkönnen nur ein einziges Kind haben, daher müssen Sie alles darunter Viewwie oben gezeigt in ein einziges einwickeln .

Joshua Pinter
quelle
4
React Native hat die statische dismiss()Methode auf der Tastatur verfügbar gemacht, daher lautet die aktualisierte Methode : import { Keyboard } from 'react-native'; Keyboard.dismiss().
Joshua Pinter
1
Ich habe eine Tastatur, die herumhängt, seit ich ein Reload durchgeführt habe, während ich mich auf ein Eingabefeld konzentriert habe. In diesem Fall Keyboard.dismiss()wird nichts unternommen, da die Implementierung davon abhängt, dass ich mich auf eine Eingabe konzentriere, die ich nicht mehr bin.
Pstanton
@pstanton Was mussten Sie dann tun, um die Tastatur zu schließen?
Joshua Pinter
Es gab keine Möglichkeit, die ich finden konnte, also zwang ich mich zu schließen!
Pstanton
41

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.

TurboFish
quelle
1
Es funktioniert mit der Bildlaufansicht, aber es gibt immer noch Fälle, in denen ich auf die Schaltfläche klicken kann, um die Ansicht mithilfe des Navigators zu ändern. Die Tastatur bleibt immer noch unten und muss manuell auf die Eingabetaste klicken, um sie zu schließen :(
Piyush Chauhan
1
Die Tastatur wird ausgeblendet, wenn Sie außerhalb des TextInput tippen. Wenn Sie jedoch (anstatt außerhalb zu tippen) auf einen anderen TextInput tippen und schließlich nach außen tippen, wird die Tastatur nicht ausgeblendet. Getestet am 0.6.0.
Jllodra
Ich sehe jetzt ein anderes Verhalten. Durch Tippen außerhalb des TextInputs wird die Tastatur ausgeblendet, auch wenn ich direkt auf einen anderen TextInput tippe. Dies ist ein Problem, da Sie zweimal auf einen anderen TextInput tippen müssen, um ihn eingeben zu können! Seufzer. (mit RN 0,19)
Lane Rettig
1
Sie können scrollbar auf true setzen und keyboardShouldPersistTaps = {'handle'} und keyboardDismissMode = {'on-drag'} verwenden, um den gleichen Effekt zu erzielen
Eric Wiener
nur scroll für mich gearbeitet ich weiß nicht , warum, die akzeptierte Antwort , wenn ich Eingabe einer Zahlentastatur entlässt
Yvon Huynh
33

Sie können wie unten beschrieben aus React-Native importieren :keyboard

import { Keyboard } from 'react-native';

und in Ihrem Code könnte so etwas sein:

render() {
    return (
      <TextInput
        onSubmit={Keyboard.dismiss}
      />
    );
  }

statische Entlassung ()

Schaltet die aktive Tastatur aus und entfernt den Fokus.

Alireza
quelle
Ich brauchte nicht static dismiss(). Ich habe gerade Keyboard.dismiss()meine onSubmit-Methode hinzugefügt (woonSubmitEditing={() => {this.onSubmit()}})
SherylHohman
30

Ich bin brandneu bei React und bin beim Erstellen einer Demo-App auf genau dasselbe Problem gestoßen. Wenn Sie die onStartShouldSetResponderRequisite ( hier beschrieben ) verwenden, können Sie einen einfachen alten berühren React.View. Neugierig auf die Gedanken erfahrener Leser zu dieser Strategie / wenn es eine bessere gibt, aber das hat bei mir funktioniert:

containerTouched(event) {
  this.refs.textInput.blur();
  return false;
}

render() {
  <View onStartShouldSetResponder={this.containerTouched.bind(this)}>
    <TextInput ref='textInput' />
  </View>
}

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 TextInputdirekt auf die beziehen , um sie zu verwischen. Zweitens wird das onStartShouldSetRespondervon anderen berührbaren Bedienelementen abgefangen. Wenn Sie also in der Containeransicht auf ein TouchableHighlightetc (einschließlich eines anderen TextInput) klicken, wird das Ereignis nicht ausgelöst. Wenn Sie jedoch Imagein der Containeransicht auf eine klicken , wird die Tastatur weiterhin geschlossen.

Jäger
quelle
Es funktioniert definitiv. Aber wie Sie sagten, ich bin auch neugierig, ob dies der richtige Weg ist.
Ich
Großartig, das hat bei mir funktioniert. Meine Bildlaufansicht funktionierte nicht mit den berührbaren Methoden! Vielen Dank!
James Trickey
24

Verwenden Sie ScrollViewanstelle von Viewund setzen Sie das keyboardShouldPersistTapsAttribut auf false.

<ScrollView style={styles.container} keyboardShouldPersistTaps={false}>
    <TextInput
        placeholder="Post Title"
        onChange={(event) => this.updateTitle(event.nativeEvent.text)}
        style={styles.default}/>
 </ScrollView>
Tyler McGinnis
quelle
Gemäß der Dokumentation ist das keyboardShouldPersistTapsAttribut bei Verwendung von a standardmäßig false ScrollView. Ich habe gerade mein React-Native auf die neueste Version aktualisiert und das Problem beim Umschalten auf eine Sekunde besteht TextInputweiterhin. Die Tastatur ist dann nicht entlassbar. Haben Sie eine Lösung für dieses spezielle Problem gefunden?
TurboFish
1
Die Dokumente waren falsch, wurden aber jetzt aktualisiert. Siehe PR: github.com/facebook/react-native/issues/2150
Ryan McDermott
Was macht keyboardShouldPersistTapsdas Warum ist es hier relevant? Vielen Dank
Lane Rettig
1
Warnung: 'keyboardShouldPersistTaps = {false}' ist veraltet. Verwenden Sie stattdessen 'keyboardShouldPersistTaps = "never"'
Milan Rakos
13

Wenn 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.

import React, { Component } from 'react'
import {
  Keyboard,
  TextInput,
  TouchableOpacity,
  View,
  KeyboardAvoidingView,
} from 'react-native'

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      behavior: 'position',
    }
    this._keyboardDismiss = this._keyboardDismiss.bind(this)
  }

  componentWillMount() {
    this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide);
  }

  componentWillUnmount() {
    this.keyboardDidHideListener.remove()
  }

  _keyboardDidHide() {
    Keyboard.dismiss()
  }

  render() {
    return (
      <KeyboardAvoidingView
        style={{ flex: 1 }}
        behavior={this.state.behavior}
      >
        <TouchableOpacity onPress={this._keyboardDidHide}>
          <View>
            <TextInput
              style={{
                color: '#000000',
                paddingLeft: 15,
                paddingTop: 10,
                fontSize: 18,
              }}
              multiline={true}
              textStyle={{ fontSize: '20', fontFamily: 'Montserrat-Medium' }}
              placeholder="Share your Success..."
              value={this.state.text}
              underlineColorAndroid="transparent"
              returnKeyType={'default'}
            />
          </View>
        </TouchableOpacity>
      </KeyboardAvoidingView>
    )
  }
}
Austin Reynolds
quelle
11

Aktualisierte Verwendung von ScrollViewfürReact Native 0.39

<ScrollView scrollEnabled={false} contentContainerStyle={{flex: 1}} />

Es gibt jedoch immer noch ein Problem mit zwei TextInputBoxen. 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, TextInputswährend Sie eine verwenden ScrollView.

Anshul Koka
quelle
3
Es scheint, dass 0.40Aktualisierungen keyboardShouldPersistTapsvon a booleanauf a enummit dem möglichen Wert "behandelt" erfolgen, um dies zu beheben.
Anshul Koka
11

Es gibt verschiedene Möglichkeiten, wie onPressSie Ereignisse steuern können:

import { Keyboard } from 'react-native'

onClickFunction = () => {
     Keyboard.dismiss()
}

Wenn Sie die Tastatur beim Scrollen schließen möchten:

<ScrollView keyboardDismissMode={'on-drag'}>
     //content
</ScrollView>

Weitere Optionen sind, wenn der Benutzer außerhalb der Tastatur klickt:

<KeyboardAvoidingView behavior='padding' style={{ flex: 1}}>
    //inputs and other content
</KeyboardAvoidingView>
Idan
quelle
1
Leute, die Frage ist immer noch aktuell, aber die Frage ist 4 Jahre alt (Ende 2019 jetzt). RN ist jetzt so einfach und benutzerfreundlich. Wir müssen alle Fähigkeiten überprüfen, um eine Lösung für diese Frage zu finden. Lassen Sie diesen Kommentar positiv bewerten!
Link
@ Link Hallo danke! Ich bin absolut einverstanden
Idan
10
const dismissKeyboard = require('dismissKeyboard');
dismissKeyboard(); //dismisses it

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 Keyboardund Aufruf der Methodedismiss()

Adeel Imran
quelle
1
Dies ist das genaue Äquivalent zu Keyboard.dismiss, das vorzuziehen ist, da es dokumentiert ist. github.com/facebook/react-native/blob/…
Ricardo Stuven
Zu dem Zeitpunkt, als ich diese Antwort gab, war dies nicht dokumentiert. Danke, dass du es erwähnt hast. Ich werde meine Antwort aktualisieren.
Adeel Imran
10

Das Einwickeln Ihrer Komponenten in a TouchableWithoutFeedbackkann zu seltsamem Bildlaufverhalten und anderen Problemen führen. Ich ziehe es vor, meine oberste App in eine Viewmit der onStartShouldSetResponderausgefü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.

 handleUnhandledTouches(){
   Keyboard.dismiss
   return false;
 }

 render(){
    <View style={{ flex: 1 }} onStartShouldSetResponder={this.handleUnhandledTouches}>
       <MyApp>
    </View>
  }
Scottmas
quelle
Vielen Dank für Ihre Antwort @Scottmas. Ich habe es letztendlich anstelle von TouchableWithoutFeedback verwendet, weil Sie einen Kommentar zu "seltsames Bildlaufverhalten und andere Probleme" abgegeben haben. Aber wenn ich Ihren Worten nicht blind vertraute, können Sie Ihren Kommentar näher erläutern? :)
kuhr
8

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.

Jonathan Huang
quelle
Ich habe den Rückruf "onEndEditing" debuggt, aber er wurde noch nie ausgelöst. Ich werde dies mit der neueren Version von
React
7

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.

christopherdro
quelle
4
Könnten Sie darauf hinweisen, welcher Teil ihres Codes / Dokuments dies tut? Ich stoße auf das gleiche Problem und ich weiß es wirklich zu schätzen, dass es mir die Richtung zeigt :)
Okazaki Miyama Yuta
Bestätigt, dass dies ab RN 0.19 (spätestens) immer noch ein Problem ist.
Lane Rettig
Immer noch ein Problem mit RN
0.28
7

Wie wäre es mit einer berührbaren Komponente um / neben dem TextInput?

var INPUTREF = 'MyTextInput';

class TestKb extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <View style={{ flex: 1, flexDirection: 'column', backgroundColor: 'blue' }}>
                <View>
                    <TextInput ref={'MyTextInput'}
                        style={{
                            height: 40,
                            borderWidth: 1,
                            backgroundColor: 'grey'
                        }} ></TextInput>
                </View>
                <TouchableWithoutFeedback onPress={() => this.refs[INPUTREF].blur()}>
                    <View 
                        style={{ 
                            flex: 1, 
                            flexDirection: 'column', 
                            backgroundColor: 'green' 
                        }} 
                    />
                </TouchableWithoutFeedback>
            </View>
        )
    }
}
Langeweile
quelle
6

Wickeln Sie Ihre gesamte Komponente ein mit:

import { TouchableWithoutFeedback, Keyboard } from 'react-native'

<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
...
</TouchableWithoutFeedback>

Hat für mich gearbeitet

Arthur Mastropietro
quelle
4

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 -

Keyboard.dismiss()

statisches Entlassen () Schließt die aktive Tastatur und entfernt den Fokus gemäß den reaktiven nativen Dokumenten.

Abhinandan Sharma
quelle
3

Importieren Sie zuerst die Tastatur

import { Keyboard } from 'react-native'

Dann fügst TextInputdu in deinem Keyboard.dismissdie onSubmitEditingRequisite hinzu. Sie sollten etwas haben, das so aussieht:

render(){
  return(
    <View>
      <TextInput 
        onSubmitEditing={Keyboard.dismiss}
       />
    </View>
  )  
}
Nagendra kr.
quelle
1
Mehr Kontext wäre schön.
Colidyre
2

Mit keyboardShouldPersistTapsin der ScrollViewSie 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.

Samuel
quelle
Das hat bei mir funktioniert! (Allerdings musste ich es in meine Drittanbieter-Bibliothek einfügen react-native-keyboard-aware-scroll-view).
Nick Grealy
1

in ScrollViewGebrauch

keyboardShouldPersistTaps="handled" 

Dies wird Ihren Job machen.

Gamingumar
quelle
1

Es gibt viele Möglichkeiten, wie Sie damit umgehen können. Die obigen Antworten enthalten keine Informationen, returnTypeda 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 Keyboardvon verwendenreact-native

import { Keyboard } from 'react-native' and inside onPress of that button, you can useKeyboard.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 verwenden onSubmitEditing={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}

Sarmad Shah
quelle
0

Keyboard.dismiss()werde es tun. Aber manchmal kann es den Fokus verlieren und die Tastatur kann den Ref nicht finden. Am konsistentesten ist es, a ref=_refin 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.

Bruce Xinda Lin
quelle
0

ausprobieren keyboard.dismiss(). Es hat bei mir funktioniert

Amoli
quelle
0

Hier ist meine Lösung für das Entlassen der Tastatur und das Scrollen zu getipptem TextInput (ich verwende ScrollView mit der TastaturDismissMode-Requisite):

import React from 'react';
import {
  Platform,
  KeyboardAvoidingView,
  ScrollView
} from 'react-native';

const DismissKeyboard = ({ children }) => {
  const isAndroid = Platform.OS === 'android';
  const behavior = isAndroid ? false : 'padding';

  return (
    <KeyboardAvoidingView
      enabled
      behavior={ behavior }
      style={{ flex: 1}}
    >
      <ScrollView
        keyboardShouldPersistTaps={'always'}
        keyboardDismissMode={'on-drag'}
      >
        { children }
      </ScrollView>
    </KeyboardAvoidingView>
  );
};

export default DismissKeyboard;

Verwendungszweck:

render(){
   return(
     <DismissKeyboard>
       <TextInput
        style={{height: 40, borderColor: 'gray', borderWidth: 1}}
        onChangeText={(text) => this.setState({text})}
        value={this.state.text}
      />
     </DismissKeyboard>
   );
}

Artem Shevtsov
quelle
0

Verwenden Sie dieses Paket react-native-keyboard-aware-scroll-view

Verwenden Sie diese Komponente als Stammkomponente

Da dieses Paket react-native-keyboard-aware-scroll-viewauch eine scrollView hat, müssen Sie diese hinzufügen:

<KeyboardAwareScrollView keyboardShouldPersistTaps="handled"> <ScrollView keyboardShouldPersistTaps="handled"></ScrollView> </KeyboardAwareScrollView>

Cyrus Zei
quelle