Masquer le clavier dans react-native
Si je tape sur une entrée de texte, je veux pouvoir taper quelque part ailleurs afin de fermer à nouveau le clavier (pas la touche de retour cependant). Je n'ai pas trouvé la moindre information à ce sujet dans tous les tutoriels et les articles de blog que j'ai lus.
Cet exemple de base ne fonctionne toujours pas pour moi avec react-native 0.4.2 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 non ignoré devient plus grave si vous avez keyboardType='numeric', car il n’ya aucun moyen de le supprimer.
Remplacer View par ScrollView n’est pas une solution correcte, car si vous avez plusieurs textInputs ou buttons, taper dessus lorsque le clavier est activé ne fera que fermer le clavier.
La méthode correcte consiste à encapsuler View avec TouchableWithoutFeedback et à appeler Keyboard.dismiss()
EDIT: vous pouvez maintenant utiliser ScrollView avec keyboardShouldPersistTaps='handled' pour ne fermer le clavier que lorsque le tapotement n'est pas géré par les enfants (par exemple, en tapant sur d'autres entrées de texte ou boutons)
Si tu as
<View style={{flex: 1}}>
<TextInput keyboardType='numeric'/>
</View>
Le changer 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>
ÉDITER: 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)
Il suffit de l'utiliser comme ça
...
render() {
<DismissKeyboardView>
<TextInput keyboardType='numeric'/>
</DismissKeyboardView>
}
REMARQUE: le accessible={false} est requis pour que le formulaire de saisie continue à être 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()
utilisez ceci pour un licenciement personnalisé
var dismissKeyboard = require('dismissKeyboard');
var TestView = React.createClass({
render: function(){
return (
<TouchableWithoutFeedback
onPress={dismissKeyboard}>
<View />
</TouchableWithoutFeedback>
)
}
})
Utiliser le Keyboard.dismiss() de React Native
Réponse mise à jour
React Native a exposé la méthode statique dismiss() sur la Keyboard. La méthode mise à jour est donc:
import { Keyboard } from 'react-native';
Keyboard.dismiss()
Réponse originale
Utilisez React Native's dismissKeyboard Library.
J'avais un problème très similaire et j'avais l'impression d'être le seul à ne pas l'avoir.
ScrollViews
Si vous avez une ScrollView, ou tout ce qui en hérite comme une ListView, vous pouvez ajouter un accessoire qui fermera automatiquement le clavier en fonction de la presse ou du déplacement d'événements.
Le prop est keyboardDismissMode et peut avoir la valeur none, interactive ou on-drag. Vous pouvez en lire plus à ce sujet ici .
Vues régulières
Si vous avez autre chose qu'une ScrollView et que vous souhaitez que le clavier soit ignoré, vous pouvez utiliser une simple TouchableWithoutFeedback et demander à onPress d'utiliser la bibliothèque d'utilitaires de React Native dismissKeyboard pour ignorer le clavier.
Dans votre exemple, vous pourriez 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: TouchableWithoutFeedback ne pouvant avoir qu'un seul enfant, vous devez donc envelopper tout ce qui se trouve en dessous dans une seule View, comme 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 (vous devrez peut-être ajuster le style).
De cette façon, le clavier est ignoré au moment où je tape ailleurs. Cela peut être un problème avec react-native, mais les événements tactiles semblent uniquement être gérés avec ScrollViews, ce qui conduit au comportement décrit.
Edit: Merci à Jllodra. Veuillez noter que si vous appuyez directement sur un autre Textinput puis sur l'extérieur, le clavier ne sera toujours pas masqué.
Je suis tout nouveau chez 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 le prop onStartShouldSetResponder (décrit ici ), vous pouvez toucher à un ancien React.View. Curieux d'entendre les réflexions plus expérimentées des Réacteurs sur cette stratégie/s'il y en a une meilleure, mais voici 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’existe pas encore de moyen de mettre fin à la modification de toutes les sous-vues; nous devons donc nous référer directement à la variable TextInput pour la rendre floue. Deuxièmement, le onStartShouldSetResponder est intercepté par d’autres contrôles palpables. Donc, cliquer sur un TouchableHighlight etc. (y compris un autre TextInput) dans la vue conteneur déclenchera pas l'événement. Cependant, le fait de cliquer sur un Image dans la vue conteneur fera toujours fuir le clavier.
Vous pouvez importer keyboard de react-native comme ci-dessous:
import { Keyboard } from 'react-native';
et dans votre code, faites quelque chose comme ça:
render() {
return (
<TextInput
onSubmit={Keyboard.dismiss}
/>
);
}
statique statique ()
Fait disparaître le clavier actif et supprime la mise au point.
Utilisez ScrollView au lieu de View et définissez l'attribut keyboardShouldPersistTaps 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 concret montrant comment supprimer une entrée de texte multiligne, c'est parti! J'espère que cela aidera certaines personnes, les documents ne décrivent pas du tout le moyen d'écarter une entrée multiligne, du moins il n'y avait aucune référence spécifique sur la façon de le faire. Encore un noob pour poster ici sur la pile, si quelqu'un pense que cela devrait être une référence à la publication de cet extrait a été écrit pour me le faire 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>
)
}
}
const dismissKeyboard = require('dismissKeyboard');
dismissKeyboard(); //dismisses it
Approche no 2;
Merci à user @ ricardo-stuven de l'avoir signalé, il existe un autre moyen plus efficace de supprimer le clavier que vous pouvez voir dans le exemple dans la documentation native native.
Importation simple Keyboard et appelez sa méthode dismiss()
Mise à jour de l'utilisation de ScrollView pour React Native 0.39
<ScrollView scrollEnabled={false} contentContainerStyle={{flex: 1}} />
Bien que, il y ait toujours un problème avec deux boîtes TextInput. par exemple. Un formulaire de nom d'utilisateur et de mot de passe fermerait maintenant le clavier lors du basculement entre les entrées. J'adorerais avoir quelques suggestions pour garder le clavier en vie lors du passage de TextInputs à une ScrollView.
Je viens de tester cela avec la dernière version de React Native (0.4.2) et le clavier est ignoré lorsque vous appuyez ailleurs.
Et FYI: vous pouvez définir une fonction de rappel à exécuter lorsque vous fermez le clavier en l'attribuant à la propriété "onEndEditing".
Pourquoi ne pas 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>
)
}
}
Si je ne me trompe pas, la dernière version de React Native a résolu le problème de la possibilité de fermer le clavier en appuyant dessus.
Envelopper vos composants dans une TouchableWithoutFeedback peut entraîner un comportement de défilement étrange et d’autres problèmes. Je préfère envelopper ma meilleure application dans une View avec la propriété onStartShouldSetResponder renseignée. Cela me permettra de gérer toutes les touches non gérées et de fermer le clavier. Fait important, 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>
}
https://facebook.github.io/react-native/docs/keyboard.html
Utilisation
Keyboard.dismiss(0);
cacher le clavier.
Keyboard module est utilisé pour contrôler les événements du clavier.
import { Keyboard } from 'react-native'Ajouter ci-dessous le code dans la méthode de rendu.
render() { return <TextInput onSubmitEditing={Keyboard.dismiss} />; }
Vous pouvez utiliser -
Keyboard.dismiss()
static licencie () Fait disparaître le clavier actif et supprime le focus conformément aux documents natifs de réaction.
En utilisant keyboardShouldPersistTaps dans ScrollView, vous pouvez passer "manipulé", qui traite des problèmes que les gens disent venir avec l'utilisation de ScrollView. Voici ce que dit la documentation sur l'utilisation de 'manipulé': the keyboard will not dismiss automatically when the tap was handled by a children, (or captured by an ancestor).Ici est l'endroit où il est référencé.
en ScrollView usage
keyboardShouldPersistTaps="handled"
Cela fera votre travail.
Il y a plusieurs façons de gérer cela, les réponses ci-dessus n'incluent pas returnType car elle n'était pas incluse dans réag-native pour le moment.
1: Vous pouvez le résoudre en encapsulant vos composants dans ScrollView. Par défaut, ScrollView ferme le clavier si nous appuyons quelque part. Mais si vous voulez utiliser ScrollView mais désactivez cet effet. vous pouvez utiliser pointerEvent prop à scrollView pointerEvents = 'none'.
2: Si vous souhaitez fermer le clavier lorsque vous appuyez sur un bouton, vous pouvez simplement utiliser Keyboard à partir de react-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 retour du clavier, REMARQUE: si votre type de clavier est numérique, vous n’avez pas de touche de retour . Vous pouvez donc l’activer en donnant Si elle est une propriété, returnKeyType to done. Ou vous pouvez utiliser onSubmitEditing={Keyboard.dismiss}, elle est appelée chaque fois que nous appuyons sur la touche de retour. Et si vous voulez ignorer le clavier lorsque vous perdez la mise au point, vous pouvez utiliser onBlur prop, onBlur = {Keyboard.dismiss}
Première importation clavier
import { Keyboard } from 'react-native'
Ensuite, dans votre TextInput, vous ajoutez Keyboard.dismiss à la propriété onSubmitEditing Vous devriez avoir quelque chose qui ressemble à ceci:
render(){
return(
<View>
<TextInput
onSubmitEditing={Keyboard.dismiss}
/>
</View>
)
}
essayez keyboard.dismiss(). Ça a fonctionné pour moi
Il y a plusieurs façons, si vous contrôlez un événement comme onPress, vous pouvez 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>
Une autre option est lorsque l'utilisateur clique en dehors du clavier:
<KeyboardAvoidingView behavior='padding' style={{ flex: 1}}>
//inputs and other content
</KeyboardAvoidingView>
Keyboard.dismiss() le fera. Mais parfois, il peut perdre le focus et le clavier sera incapable de trouver le ref. La méthode la plus cohérente consiste à placer un ref=_ref dans textInput, et à _ref.blur() lorsque vous devez ignorer et à _ref.focus() lorsque vous devez rétablir le clavier.
Voici ma solution pour la suppression de clavier et le défilement vers TextInput engagé (j'utilise ScrollView avec keyboardDismissMode prop):
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>
);
}