Tastatur in reaktiver Natur ausblenden

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 zur benutzerdefinierten Entlassung

var dismissKeyboard = require('dismissKeyboard');

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

Verwenden Sie React Native's Keyboard.dismiss()

Antwort aktualisiert

React Native hat die statische dismiss()-Methode für Keyboard verfügbar gemacht. Die aktualisierte Methode lautet daher: 

import { Keyboard } from 'react-native'; 

Keyboard.dismiss()

Ursprüngliche Antwort

Verwenden Sie die Bibliothek dismissKeyboard von React Native.

Ich hatte ein sehr ähnliches Problem und hatte das Gefühl, dass ich das einzige war, das es nicht bekam.

ScrollViews

Wenn Sie eine ScrollView-Komponente oder etwas, das davon erbt, wie ListView, verwenden, können Sie eine Requisite hinzufügen, die die Tastatur aufgrund von Drücken oder Ziehen von Ereignissen automatisch löscht. 

Die Requisite ist keyboardDismissMode und kann den Wert none, interactive oder on-drag haben. Sie können mehr zu diesem hier lesen.

Regelmäßige Ansichten

Wenn Sie etwas anderes als ScrollView haben und die Tastatur nicht mehr gedrückt werden sollen, können Sie eine einfache TouchableWithoutFeedback verwenden und die onPress-Dienstbibliothek von React Native dismissKeyboard verwenden, um die Tastatur für Sie zu schließen.

In Ihrem Beispiel könnten Sie so etwas 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: TouchableWithoutFeedback kann nur ein einziges Kind haben, daher müssen Sie alles darunter in ein einzelnes View wie oben gezeigt einwickeln.

Die einfache Antwort besteht darin, eine ScrollView anstelle von View zu verwenden und die scrollbare Eigenschaft auf false zu setzen (möglicherweise müssen Sie jedoch die Form anpassen).

Auf diese Weise wird die Tastatur in dem Moment verworfen, in dem ich anderswo tippe. Dies kann ein Problem mit React-Native sein, aber Tap-Events werden nur mit ScrollViews behandelt, 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 Textinput tippen.

Ich bin brandneu bei React und bin beim Erstellen einer Demo-App auf genau dasselbe Problem gestoßen. Wenn Sie die Requisite onStartShouldSetResponder (beschrieben hier ) verwenden, können Sie einen einfachen alten React.View. Neugierig, mehr erfahrene Reaktionen auf diese Strategie zu hören/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, wie bereits erwähnt hier , gibt es noch keine Möglichkeit, die Bearbeitung aller Unteransichten zu beenden. Daher müssen wir direkt auf TextInput verweisen, um sie zu verwischen. Zweitens wird das onStartShouldSetResponder von anderen berührbaren Steuerelementen darüber abgefangen. Wenn Sie also in der Containeransicht auf ein TouchableHighlight usw. (einschließlich eines anderen TextInput) klicken, wird das Ereignis nicht ausgelöst. Wenn Sie jedoch in der Containeransicht auf Image klicken, wird die Tastatur weiterhin ausgeblendet.

Sie können importieren keyboard von reag-native wie folgt:

import { Keyboard } from 'react-native';

und in Ihrem Code so etwas tun:

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

statische Entlassung ()

Schließt die aktive Tastatur und entfernt den Fokus.

Verwenden Sie ScrollView anstelle von View und setzen Sie das keyboardShouldPersistTaps-Attribut 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 benötigt, um eine mehrzeilige Texteingabe hier zu verwerfen, können Sie loslegen! Ich hoffe, das hilft einigen Leuten da draußen, die Dokumente beschreiben keine Möglichkeit, eine mehrzeilige Eingabe überhaupt abzulehnen, zumindest gab es keinen konkreten Hinweis darauf, wie sie es tun sollte. Es ist immer noch ein Noob, hier auf dem Stack zu posten, wenn jemand der Meinung ist, dass dies ein Hinweis auf den eigentlichen Beitrag sein sollte, für den dieses Snippet geschrieben wurde. 

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

const dismissKeyboard = require('dismissKeyboard');
dismissKeyboard(); //dismisses it

Ansatz Nr. 2;

Dank des Benutzers @ ricardo-stuven für diesen Hinweis gibt es eine andere Möglichkeit, die Tastatur zu verwerfen, die Sie im example in den reaktiven Dokumenten finden.

Einfacher Import Keyboard und Aufruf der Methode dismiss()

Verwendung von ScrollView für React Native 0.39 aktualisiert

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

Trotzdem gibt es immer noch ein Problem mit zwei TextInput-Boxen. z.B. Ein Formular für Benutzername und Passwort würde jetzt die Tastatur beim Wechsel zwischen Eingaben verwerfen. Ich würde gerne einige Vorschläge erhalten, wie die Tastatur am Leben bleiben kann, wenn Sie während der Verwendung einer TextInputs zwischen ScrollView wechseln.

Ich habe dies gerade mit der neuesten React Native-Version (0.4.2) getestet, und die Tastatur wird beim Tippen auf eine andere Stelle verworfen.

Und FYI: Sie können eine Callback-Funktion festlegen, die ausgeführt wird, wenn Sie die Tastatur schließen, indem Sie sie der "onEndEditing" -Option zuordnen.

Wie wäre es, wenn Sie eine berührbare Komponente neben/neben der TextInput platzieren?

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

Wenn ich mich nicht irre, hat die neueste Version von React Native dieses Problem gelöst, indem Sie die Tastatur durch Antippen entlassen können.

Tastatur Modul wird verwendet, um Tastaturereignisse zu steuern.

• import { Keyboard } from 'react-native'

• Fügen Sie folgenden Code in die Rendermethode ein.

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

Sie können verwenden -

Keyboard.dismiss()

static dismiss () Blendet die aktive Tastatur aus und entfernt den Fokus gemäß der Reaktion auf native Dokumente.

Das Umschließen Ihrer Komponenten in eine TouchableWithoutFeedback kann zu seltsamem Bildlaufverhalten und anderen Problemen führen. Ich ziehe es vor, meine oberste App in eine View zu packen, wobei die onStartShouldSetResponder-Eigenschaft ausgefüllt ist. Dadurch kann ich alle unbehandelten Berührungen bearbeiten und dann die Tastatur schließen. Da die Handler-Funktion false zurückgibt, wird das Berührungsereignis wie üblich weitergeleitet. 

 handleUnhandledTouches(){
   Keyboard.dismiss
   return false;
 }

 render(){
    <View style={{ flex: 1 }} onStartShouldSetResponder={this.handleUnhandledTouches}>
       <MyApp>
    </View>
  }

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

Benutzen 

Keyboard.dismiss(0);

um die Tastatur zu verbergen.

Mit keyboardShouldPersistTaps in der ScrollView können Sie "gehandhabt" übergeben, das sich mit den Problemen befasst, von denen die Benutzer sagen, dass sie die ScrollView 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 dort verwiesen.

in ScrollView verwenden 

keyboardShouldPersistTaps="handled" 

Das wird deine Arbeit machen.

Es gibt viele Möglichkeiten, wie Sie damit umgehen können. Die Antworten oben enthalten keine returnType, da sie zu dieser Zeit nicht in reag-native enthalten war.

1: Sie können das Problem lösen, indem Sie Ihre Komponenten in ScrollView einbetten. Standardmäßig schließt ScrollView die Tastatur, wenn Sie irgendwo drücken. Wenn Sie jedoch ScrollView verwenden möchten, deaktivieren Sie diesen Effekt. Sie können pointerEvent prop für scrollView pointerEvents = 'none' verwenden.

2: Wenn Sie die Tastatur bei einem Tastendruck schließen möchten, können Sie einfach Keyboard aus react-native verwenden.

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 sie also durch Eingabe aktivieren Es ist eine Eigenschaft, returnKeyType an done. Sie können auch onSubmitEditing={Keyboard.dismiss} verwenden. Es wird aufgerufen, wenn wir die Return-Taste drücken. Und wenn Sie die Tastatur bei Verlust des Fokus verwerfen möchten, können Sie onBlur prop verwenden, onBlur = {Keyboard.dismiss}

Erste Tastatur importieren

import { Keyboard } from 'react-native'

Dann fügen Sie in Ihrer TextInputKeyboard.dismiss zur onSubmitEditing-Eigenschaft hinzu. Sie sollten etwas haben, das so aussieht: 

render(){
  return(
    <View>
      <TextInput 
        onSubmitEditing={Keyboard.dismiss}
       />
    </View>
  )  
}

probieren Sie keyboard.dismiss() aus. Es hat für mich funktioniert 

Wenn Sie Ereignisse wie onPress steuern, gibt es verschiedene Möglichkeiten:

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 Option ist, wenn der Benutzer außerhalb der Tastatur klickt:

<KeyboardAvoidingView behavior='padding' style={{ flex: 1}}>
    //inputs and other content
</KeyboardAvoidingView>

Keyboard.dismiss() wird es tun. Manchmal verliert es jedoch den Fokus und Keyboard kann den Ref nicht finden. Der konsistenteste Weg ist, dem textInput einen ref=_ref zu geben, und _ref.blur() zu tun, wenn Sie ihn abbrechen müssen, und _ref.focus(), wenn Sie die Tastatur zurückbringen müssen.

Hier ist meine Lösung für das Entfernen der Tastatur und Scrollen zu getipptem TextInput (ich verwende ScrollView mit keyboardDismissMode-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>
   );
}