Tastatur in React-Native ausblenden

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>

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!

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

Verwenden Sie dies für die benutzerdefinierte Entlassung

var dismissKeyboard = require('dismissKeyboard');

var TestView = React.createClass({
    render: function(){
        return (
            <TouchableWithoutFeedback 
                onPress={dismissKeyboard}>
                <View />
            </TouchableWithoutFeedback>
        )
    }
})

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 .

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.

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.

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.

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>

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

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.

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>

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()

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

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.

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.

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

Wickeln Sie Ihre gesamte Komponente ein mit:

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

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

Hat für mich gearbeitet

https://facebook.github.io/react-native/docs/keyboard.html

Verwenden

Keyboard.dismiss(0);

um die Tastatur zu verstecken.

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.

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

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.

in ScrollViewGebrauch

keyboardShouldPersistTaps="handled" 

Dies wird Ihren Job machen.

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}

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.

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

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>
   );
}

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>