Ocultar teclado en reaccionar nativo
Si toco una entrada de texto, quiero poder tocar en otro lugar para descartar el teclado nuevamente (aunque no la tecla de retorno). No he encontrado la más mínima información sobre esto en todos los tutoriales y publicaciones de blog que leo.
Este ejemplo básico todavía no me funciona con reaccionar-nativo 0.4.2 en el Simulador. No pude probarlo en mi iPhone todavía.
<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>
El problema de que el teclado no se descarte se vuelve más grave si lo tiene keyboardType='numeric', ya que no hay forma de descartarlo.
Reemplazar View con ScrollView no es una solución correcta, ya que si tiene varios textInputs o buttons, tocarlos mientras el teclado está arriba solo cerrará el teclado.
La forma correcta es encapsular la Vista con TouchableWithoutFeedbacky llamarKeyboard.dismiss()
EDITAR: ahora puede usar ScrollViewcon keyboardShouldPersistTaps='handled'para descartar el teclado solo cuando los niños no manejan el toque (es decir, al tocar otras entradas de texto o botones)
Si usted tiene
<View style={{flex: 1}}>
<TextInput keyboardType='numeric'/>
</View>
Cámbielo a
<ScrollView contentContainerStyle={{flexGrow: 1}}
keyboardShouldPersistTaps='handled'
>
<TextInput keyboardType='numeric'/>
</ScrollView>
o
import {Keyboard} from 'react-native'
<TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
<View style={{flex: 1}}>
<TextInput keyboardType='numeric'/>
</View>
</TouchableWithoutFeedback>
EDITAR: También puede crear un componente de orden superior para descartar el teclado.
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)
Simplemente úsalo así
...
render() {
<DismissKeyboardView>
<TextInput keyboardType='numeric'/>
</DismissKeyboardView>
}
NOTA: accessible={false}es necesario para que el formulario de entrada siga siendo accesible a través de VoiceOver. ¡Las personas con discapacidad visual te lo agradecerán!
¡ Esto acaba de ser actualizado y documentado ! No más trucos ocultos.
import { Keyboard } from 'react-native'
// Hide that keyboard!
Keyboard.dismiss()
enlace de github
Utilice React NativeKeyboard.dismiss()
Respuesta actualizada
React Native expuso el dismiss()método estático en Keyboard, por lo que el método actualizado es:
import { Keyboard } from 'react-native';
Keyboard.dismiss()
Respuesta original
Utilice la biblioteca de React Native dismissKeyboard.
Tuve un problema muy similar y sentí que era el único que no lo entendía.
Vistas de desplazamiento
Si tiene un ScrollView, o cualquier cosa que herede de él, como un ListView, puede agregar un accesorio que descartará automáticamente el teclado según los eventos de presión o arrastre.
El accesorio es keyboardDismissModey puede tener un valor de none, interactiveo on-drag. Puedes leer más sobre eso aquí .
Vistas regulares
Si tiene algo que no sea a ScrollViewy desea presionar para descartar el teclado, puede usar un simple TouchableWithoutFeedbacky usar onPressla biblioteca de utilidades de React Native dismissKeyboardpara descartar el teclado por usted.
En tu ejemplo, podrías hacer algo como esto:
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>
Nota: TouchableWithoutFeedbacksolo puede tener un hijo, por lo que debe envolver todo lo que hay debajo en uno solo, Viewcomo se muestra arriba.
