Masquer le clavier dans React-Native

Si je tape sur une entrée de texte, je veux pouvoir taper ailleurs pour supprimer à nouveau le clavier (mais pas la touche retour). Je n'ai pas trouvé la moindre information à ce sujet dans tous les tutoriels et articles de blog que j'ai lus.

Cet exemple de base ne fonctionne toujours pas pour moi avec 0.4.2 natif réactif dans le simulateur. Impossible de l'essayer sur mon iPhone pour le moment.

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

Le problème avec le clavier ne se fermant pas devient plus grave si vous l'avez keyboardType='numeric', car il n'y a aucun moyen de le fermer.

Remplacer la vue par ScrollView n'est pas une solution correcte, comme si vous avez plusieurs textInputs ou buttons, taper dessus alors que le clavier est en place ne fera que fermer le clavier.

La bonne façon consiste à encapsuler View avec TouchableWithoutFeedbacket à appelerKeyboard.dismiss()

EDIT: Vous pouvez maintenant utiliser ScrollViewavec keyboardShouldPersistTaps='handled'pour ne fermer le clavier que lorsque le toucher n'est pas géré par les enfants (c'est-à-dire en tapant sur d'autres entrées de texte ou boutons)

Si tu as

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

Changez-le en

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

ou

import {Keyboard} from 'react-native'

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

EDIT: Vous pouvez également créer un composant d'ordre supérieur pour fermer le clavier.

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)

Utilisez-le simplement comme ceci

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

REMARQUE: le accessible={false}est requis pour que le formulaire de saisie reste accessible via VoiceOver. Les malvoyants vous remercieront!

Cela vient d'être mis à jour et documenté ! Plus de trucs cachés.

import { Keyboard } from 'react-native'

// Hide that keyboard!
Keyboard.dismiss()

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

utiliser ceci pour un licenciement personnalisé

var dismissKeyboard = require('dismissKeyboard');

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

Utilisez React Native's Keyboard.dismiss()

Réponse mise à jour

React Native a exposé la dismiss()méthode statique sur le Keyboard, donc la méthode mise à jour est:

import { Keyboard } from 'react-native'; 

Keyboard.dismiss()

Réponse originale

Utilisez la dismissKeyboardbibliothèque de React Native .

J'ai eu un problème très similaire et j'ai senti que j'étais le seul à ne pas l'avoir.

ScrollViews

Si vous avez un ScrollView, ou quelque chose qui en hérite comme un ListView, vous pouvez ajouter un accessoire qui fermera automatiquement le clavier en fonction des événements de presse ou de glissement.

L'accessoire est keyboardDismissModeet peut avoir une valeur none, interactiveou on-drag. Vous pouvez en savoir plus ici .

Vues régulières

Si vous avez autre chose qu'un ScrollViewet que vous souhaitez que n'importe quelle touche pour fermer le clavier, vous pouvez utiliser un simple TouchableWithoutFeedbacket onPressutiliser la bibliothèque d'utilitaires React Native dismissKeyboardpour fermer le clavier pour vous.

Dans votre exemple, vous pouvez faire quelque chose comme ceci:

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>

Remarque: TouchableWithoutFeedbackne peut avoir qu'un seul enfant, vous devez donc envelopper tout en dessous dans un seul Viewcomme indiqué ci-dessus.

La réponse simple est d'utiliser un ScrollView au lieu de View et de définir la propriété scrollable sur false (il faudra peut-être ajuster un certain style cependant).

De cette façon, le clavier est supprimé au moment où je tape ailleurs. Cela peut être un problème avec react-native, mais les événements tap ne semblent être traités qu'avec ScrollViews, ce qui conduit au comportement décrit.

Edit: Merci à jllodra. Veuillez noter que si vous appuyez directement sur un autre Textinput puis à l'extérieur, le clavier ne se cachera toujours pas.

Vous pouvez importer keyboard depuis react-native comme ci-dessous:

import { Keyboard } from 'react-native';

et dans votre code pourrait être quelque chose comme ceci:

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

rejet statique ()

Supprime le clavier actif et supprime la mise au point.

Je suis tout nouveau sur React et j'ai rencontré exactement le même problème lors de la création d'une application de démonstration. Si vous utilisez l' onStartShouldSetResponderaccessoire (décrit ici ), vous pouvez saisir des touches sur un vieux simple React.View. Curieux d'entendre les réflexions des React-ers plus expérimentés sur cette stratégie / s'il y en a une meilleure, mais c'est ce qui a fonctionné pour moi:

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

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

2 choses à noter ici. Tout d'abord, comme discuté ici , il n'y a pas encore de moyen de mettre fin à l'édition de toutes les sous-vues, nous devons donc nous référer TextInputdirectement au flou. Deuxièmement, le onStartShouldSetResponderest intercepté par d'autres commandes tactiles au-dessus. Donc, cliquer sur un TouchableHighlightetc (y compris un autre TextInput) dans la vue du conteneur ne déclenchera pas l'événement. Cependant, en cliquant sur un Imagedans la vue du conteneur, le clavier disparaîtra toujours.

Utilisez ScrollViewau lieu de Viewet définissez l' keyboardShouldPersistTapsattribut sur false.

<ScrollView style={styles.container} keyboardShouldPersistTaps={false}>
    <TextInput
        placeholder="Post Title"
        onChange={(event) => this.updateTitle(event.nativeEvent.text)}
        style={styles.default}/>
 </ScrollView>

Si quelqu'un a besoin d'un exemple pratique de la façon de rejeter une entrée de texte multiligne, allez-y! J'espère que cela aide certaines personnes, les documents ne décrivent pas du tout un moyen de rejeter une entrée multiligne, au moins il n'y avait aucune référence spécifique sur la façon de le faire. Encore un noob à publier ici sur la pile, si quelqu'un pense que cela devrait être une référence au message réel pour lequel cet extrait a été écrit, faites-le moi savoir.

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

Utilisation mise à jour de ScrollViewforReact Native 0.39

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

Cependant, il y a toujours un problème avec deux TextInputboîtes. par exemple. Un formulaire de nom d'utilisateur et de mot de passe ferait désormais disparaître le clavier lors du basculement entre les entrées. J'adorerais avoir quelques suggestions pour garder le clavier en vie lorsque vous basculez entre les deux TextInputsen utilisant a ScrollView.

Il existe plusieurs façons, si vous contrôlez un événement comme onPressvous pouvez l’utiliser:

import { Keyboard } from 'react-native'

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

si vous souhaitez fermer le clavier lors de l'utilisation du défilement:

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

Plus d'options est lorsque l'utilisateur clique en dehors du clavier:

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

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

Approche n ° 2;

Merci à l'utilisateur @ ricardo-stuven de l'avoir signalé, il existe une autre meilleure façon de supprimer le clavier que vous pouvez voir dans l' exemple dans les documents natifs de react.

Importation simple Keyboardet appelez sa méthodedismiss()

Envelopper vos composants dans un TouchableWithoutFeedbackpeut provoquer un comportement de défilement étrange et d'autres problèmes. Je préfère envelopper mon application dans le plus élevé Viewavec la onStartShouldSetResponderpropriété remplie. Cela me permettra de traiter toutes les touches non gérées puis masquer le clavier. Surtout, puisque la fonction de gestionnaire renvoie false, l'événement tactile est propagé comme d'habitude.

 handleUnhandledTouches(){
   Keyboard.dismiss
   return false;
 }

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

Je viens de tester cela en utilisant la dernière version React Native (0.4.2), et le clavier est fermé lorsque vous appuyez ailleurs.

Et pour info: vous pouvez définir une fonction de rappel à exécuter lorsque vous fermez le clavier en l'affectant à l'accessoire "onEndEditing".

Si je ne me trompe pas, la dernière version de React Native a résolu ce problème de pouvoir fermer le clavier en appuyant sur.

Que diriez-vous de placer un composant tactile autour / à côté de 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>
        )
    }
}

Enveloppez tout votre composant avec:

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

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

Travaillé pour moi

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

Utilisation

Keyboard.dismiss(0);

pour masquer le clavier.

Le module clavier est utilisé pour contrôler les événements du clavier.

• import { Keyboard } from 'react-native'

• Ajoutez le code ci-dessous dans la méthode de rendu.

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

Vous pouvez utiliser -

Keyboard.dismiss()

static disable () Supprime le clavier actif et supprime le focus selon les documents natifs réactifs.

Premier clavier d'importation

import { Keyboard } from 'react-native'

Ensuite, à l'intérieur de votre, TextInputvous ajoutez Keyboard.dismissà l' onSubmitEditinghélice. Vous devriez avoir quelque chose qui ressemble à ceci:

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

En utilisant keyboardShouldPersistTapsle, ScrollViewvous pouvez transmettre "géré", qui traite des problèmes que les gens disent venir avec l'utilisation de ScrollView. Voici ce que dit la documentation à propos de l'utilisation de «géré»: the keyboard will not dismiss automatically when the tap was handled by a children, (or captured by an ancestor). voici où il est référencé

en cours d' ScrollViewutilisation

keyboardShouldPersistTaps="handled" 

Cela fera votre travail.

Il existe de nombreuses façons de gérer cela, les réponses ci-dessus n'incluent pas returnTypecar il n'était pas inclus dans react-native à l'époque.

1: Vous pouvez le résoudre en enveloppant vos composants dans ScrollView, par défaut ScrollView ferme le clavier si nous appuyons quelque part. Mais au cas où vous voudriez utiliser ScrollView mais désactiver cet effet. vous pouvez utiliser pointerEvent prop pour scrollView pointerEvents = 'none'.

2: Si vous voulez fermer le clavier sur une presse de bouton, vous pouvez simplement utiliser Keyboarddereact-native

import { Keyboard } from 'react-native' and inside onPress of that button, you can useKeyboard.dismiss () '.

3: Vous pouvez également fermer le clavier lorsque vous cliquez sur la touche de retour du clavier. REMARQUE: si votre type de clavier est numérique, vous n'aurez pas de touche de retour. Ainsi, vous pouvez l'activer en lui donnant un accessoire, returnKeyType à done. ou vous pouvez utiliser onSubmitEditing={Keyboard.dismiss}, il est appelé chaque fois que nous appuyons sur la touche de retour. Et si vous souhaitez fermer le clavier lorsque vous perdez la mise au point, vous pouvez utiliser l'accessoire onBlur,onBlur = {Keyboard.dismiss}

Keyboard.dismiss()le fera. Mais parfois, il peut perdre le focus et le clavier ne pourra pas trouver la référence. La façon la plus cohérente de le faire est de mettre a ref=_refle textInput, et de le faire _ref.blur()lorsque vous devez le fermer et _ref.focus()lorsque vous devez ramener le clavier.

essayez keyboard.dismiss(). Ça a marché pour moi

Voici ma solution pour ignorer le clavier et faire défiler jusqu'à TextInput (j'utilise ScrollView avec l'accessoire keyboardDismissMode):

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;

usage:

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

utiliser ce package react-native-keyboard-aware-scroll-view

utiliser ce composant comme composant racine

puisque ce paquet a react-native-keyboard-aware-scroll-viewégalement un scrollView, vous devez y ajouter ceci:

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