Masquer le clavier dans React-Native

448

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>
TurboFish
la source
3
Essayez blur (): github.com/facebook/react-native/issues/113
herbertD
La bonne réponse devrait être celle d'Eric Kim ci-dessous. La réponse ScrollView (définissez scrollable sur false) n'est pas idéale, si vous avez plusieurs entrées de texte, elle ne vous permet pas de passer de la saisie de texte à la saisie de texte sans que le clavier soit ignoré.
hippofluff
2
Pour ceux qui veulent une solution pour l'ensemble de l'application, voir la réponse de @ Scottmas ci-dessous. (Lien: stackoverflow.com/a/49825223/1138273 )
Hamed

Réponses:

563

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!

Eric Kim
la source
28
C'est très bien, le seul commentaire que j'ai est que vous auriez pu utiliser l'api officiel du clavier dans RN, et appelé Keyboard.dismiss () au lieu d'appeler un utilitaire interne RN disableKeyboard (). Mais les deux fonctionnent bien actuellement.
Pavle Lekic
@PavleLekic Désolé pour le retard, j'ai mis à jour la réponse avec la méthode HOC
Eric Kim
3
Cela fonctionne très bien. J'ai dû changer un peu la syntaxe pour la définition de la fonction flèche, pour supprimer une erreur de jeton inattendue dans RN: const DismissKeyboardHOC = (Comp) => {
jwinn
2
Je ne peux pas obtenir onPresspour TouchableWithoutFeedbacktirer, peu importe ce que j'essaie
Brad Ryan
1
Pourquoi créer un HoC et l'ajouter à la racine de votre arborescence d'applications /
Dimitri Kopriwa
248

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

Gant Laborde
la source
4
Merci d'avoir ajouté ceci. J'espère que votre réponse bouillonne jusqu'au sommet. Je l'ai presque manqué et j'ai utilisé une solution obsolète.
chien de berger
2
Pinging @MrMuetze pour changer cela comme la bonne réponse
jehna1
8
Cela ne devrait pas être la meilleure réponse. La question demande comment fermer le clavier lorsque vous appuyez dessus. Cette réponse fournit simplement une API pour le faire, tandis que la meilleure réponse réelle fournit une implémentation réalisable.
jskidd3
vous pouvez utiliser la bibliothèque suivante: KeyboardAwareScrollView
Alejandro Gonzalez
97

utiliser ceci pour un licenciement personnalisé

var dismissKeyboard = require('dismissKeyboard');

var TestView = React.createClass({
    render: function(){
        return (
            <TouchableWithoutFeedback 
                onPress={dismissKeyboard}>
                <View />
            </TouchableWithoutFeedback>
        )
    }
})
syarul
la source
Ce n'est pas documenté, mais les échantillons du repo github natif réagissent à plusieurs reprises.
syarul
7
Intéressant, pour ceux curieux d'où cela vient, c'est une bibliothèque d'utilitaires dans React Native. Voici la source: github.com/facebook/react-native/blob/master/Libraries/…
Joshua Pinter
1
Pour une raison quelconque, cela n'a pas fonctionné, quand j'ai essayé avecreact-native-search-bar
Peter G.
C'est l'équivalent exact de Keyboard.dismiss, ce qui est préférable car documenté. github.com/facebook/react-native/blob/…
Ricardo Stuven
88

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.

Joshua Pinter
la source
4
React natif exposé statique dismiss()méthode sur le clavier, la méthode mise à jour est le suivant : import { Keyboard } from 'react-native'; Keyboard.dismiss().
Joshua Pinter
1
j'ai un clavier qui traîne depuis que j'ai fait un rechargement en me concentrant sur un champ de saisie. dans ce cas Keyboard.dismiss()ne fait rien puisque sa mise en œuvre dépend de se concentrer sur une entrée, ce que je ne suis plus.
pstanton
@pstanton Qu'avez-vous dû faire pour fermer le clavier, alors?
Joshua Pinter
Il n'y avait aucun moyen que j'ai pu trouver, alors j'ai forcé la fermeture!
pstanton
41

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.

TurboFish
la source
1
Cela fonctionne avec scrollview mais il y a encore des cas où je peux cliquer sur le bouton pour changer la vue en utilisant le navigateur et le clavier reste en bas et je dois cliquer manuellement sur la touche retour pour le fermer :(
Piyush Chauhan
1
Le clavier se cache lorsque vous appuyez à l'extérieur du TextInput, mais si (au lieu de taper à l'extérieur) vous appuyez sur un autre TextInput, puis enfin à l'extérieur, le clavier ne se cache pas. Testé le 0.6.0.
jllodra
Je vois maintenant un comportement différent. Taper en dehors de TextInput masque le clavier, même si je tape directement sur un autre TextInput - ce qui est un problème car vous devez taper deux fois sur un autre TextInput pour pouvoir taper dedans! Soupir. (avec RN 0,19)
Lane Rettig
1
Vous pouvez définir le défilement sur true et utiliser keyboardShouldPersistTaps = {'managed'} et keyboardDismissMode = {'on-drag'} pour obtenir le même effet
Eric Wiener
seul scrollview a fonctionné pour moi, je ne sais pas pourquoi, la réponse acceptée quand j'entre un clavier numérique rejette
Yvon Huynh
33

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.

Alireza
la source
Je n'en avais pas besoin static dismiss(). Je viens d'ajouter Keyboard.dismiss()ma méthode onSubmit (oùonSubmitEditing={() => {this.onSubmit()}})
SherylHohman
30

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.

chasseurs
la source
Ça marche vraiment. Mais comme vous l'avez dit, je suis aussi curieux de savoir si c'est la bonne façon. J'espère qu'ils le résoudront bientôt ( github.com/facebook/react-native/issues/113 )
mutp
Super cela a fonctionné pour moi. Ma vue de défilement ne fonctionnait pas avec les méthodes tactiles! Merci!
James Trickey
24

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>
Tyler McGinnis
la source
Selon la documentation, l' keyboardShouldPersistTapsattribut par défaut est false lors de l'utilisation de a ScrollView. Je viens de mettre à jour mon React-Native vers la dernière version et le problème avec le passage à une seconde TextInputpersiste toujours. Le clavier n'est alors pas licenciable. Avez-vous trouvé une solution à ce problème spécifique?
TurboFish
1
Les documents étaient incorrects, mais ont maintenant été mis à jour, voir ce PR: github.com/facebook/react-native/issues/2150
Ryan McDermott
Que fait keyboardShouldPersistTaps-il? Pourquoi est-ce pertinent ici? Merci
Lane Rettig
1
Avertissement: 'keyboardShouldPersistTaps = {false}' est obsolète. Utilisez plutôt "keyboardShouldPersistTaps =" never "'
Milan Rakos
13

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>
    )
  }
}
austin reynolds
la source
11

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.

Anshul Koka
la source
3
Il semble que les 0.40mises keyboardShouldPersistTapsà jour de a booleanà an enumavec une valeur possible de «traitées», ce qui est censé résoudre ce problème.
Anshul Koka
11

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>
Idan
la source
1
Les gars, la question est toujours d'actualité mais la question a 4 ans (fin 2019 maintenant). RN est maintenant tellement simple et facile à utiliser. Nous devons revoir toutes les capacités avec l'aide de nous pouvons trouver une solution à cette question. Laissez voter ce commentaire!
Lien
@Link Salut merci! Je suis tout à fait d'accord
Idan
10
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()

Adeel Imran
la source
1
C'est l'équivalent exact de Keyboard.dismiss, ce qui est préférable car documenté. github.com/facebook/react-native/blob/…
Ricardo Stuven
Au moment où j'ai donné cette réponse, cela n'était pas documenté. Merci de l'avoir mentionné. Je mettrai à jour ma réponse.
Adeel Imran
10

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>
  }
Scottmas
la source
Merci pour votre réponse @Scottmas. J'ai fini par l'utiliser à la place de TouchableWithoutFeedback, à cause de votre commentaire "comportement de défilement étrange et autres problèmes". Mais si je ne faisais pas aveuglément confiance à vos paroles, pouvez-vous développer votre commentaire? :)
kuhr
8

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

Jonathan Huang
la source
Je déboguais le rappel "onEndEditing", mais il ne s'est jamais déclenché auparavant; Je vais examiner cela avec la nouvelle version de react native, merci pour votre suggestion
TurboFish
7

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.

christopherdro
la source
4
Pourriez-vous indiquer quelle partie de leur code / doc fait cela? Je rencontre le même problème, et j'apprécie vraiment qu'il me montre la direction :)
Okazaki Miyama Yuta
Confirmé qu'il s'agit toujours d'un problème à partir de la RN 0,19 (la dernière).
Lane Rettig
Toujours un problème avec RN 0,28
hippofluff
7

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>
        )
    }
}
jeux d'ennui
la source
6

Enveloppez tout votre composant avec:

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

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

Travaillé pour moi

Arthur Mastropietro
la source
4

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.

Sharma abhinandais
la source
3

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>
  )  
}
Nagendra kr.
la source
1
Plus de contexte serait bien.
colidyre
2

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é

Samuel
la source
Cela a fonctionné pour moi! (mais j'ai dû l'ajouter dans ma bibliothèque tierce react-native-keyboard-aware-scroll-view).
Nick Grealy
1

en cours d' ScrollViewutilisation

keyboardShouldPersistTaps="handled" 

Cela fera votre travail.

gamingumar
la source
1

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}

Sarmad Shah
la source
0

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.

Bruce Xinda Lin
la source
0

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

Amoli
la source
0

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

Artem Shevtsov
la source
0

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>

Cyrus Zei
la source