reactjs - open - Ocultar teclado en react-native

react native keep keyboard open

Question

Si toco una entrada de texto, quiero poder tocar en otro lugar para cerrar nuevamente el teclado (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 leí.

Este ejemplo básico todavía no funciona para mí con react-native 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>

Answer 1

Utilice React Native Keyboard.dismiss()

Respuesta actualizada

React Native expuso el método estático de dismiss() en el Keyboard , por lo que el método actualizado es:

import { Keyboard } from ''react-native''; 

Keyboard.dismiss()

Respuesta original

Utilice la biblioteca de github.com/facebook/react-native/blob/master/Libraries/… de github.com/facebook/react-native/blob/master/Libraries/… React Native.

Tuve un problema muy similar y sentí que era el único que no lo entendió.

ScrollViews

Si tiene un ScrollView , o cualquier cosa que herede de él como ListView , puede agregar un accesorio que descarte automáticamente el teclado en función de presionar o arrastrar eventos.

El accesorio es keyboardDismissMode y puede tener un valor de none , interactive o on-drag . Puedes leer más sobre eso keyboardDismissMode .

Vistas regulares

Si tiene algo más que un ScrollView y desea presionar para descartar el teclado, puede usar un simple TouchableWithoutFeedback y hacer que onPress use la biblioteca de utilidades React Native para descartar el teclado por usted.

En su ejemplo, podría 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: TouchableWithoutFeedback solo puede tener un solo hijo, por lo que debe envolver todo debajo de él en una sola View como se muestra arriba.

Answer 2

¡Esto acaba de actualizarse y documentarse ! No más trucos ocultos.

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

// Hide that keyboard!
Keyboard.dismiss()

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

Answer 3

¿Qué hay de colocar un componente táctil alrededor / al lado 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>
        )
    }
}

Answer 4

Acabo de probar esto usando la última versión React Native (0.4.2), y el teclado se cierra cuando tocas en otro lado.

Y para su información: puede configurar una función de devolución de llamada para que se ejecute cuando descarta el teclado asignándolo al accesorio "onEndEditing".

Answer 5

Ajustar sus componentes en un TouchableWithoutFeedback puede causar un comportamiento de desplazamiento extraño y otros problemas. Prefiero envolver mi aplicación superior en una View con la propiedad onStartShouldSetResponder completada. Esto me permitirá manejar todos los toques no manejados y luego cerrar el teclado. Es importante destacar que, dado que la función del controlador devuelve falso, el evento táctil se propaga como normal.

 handleUnhandledTouches(){
   Keyboard.dismiss
   return false;
 }

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

Answer 6

Aquí está mi solución para descartar y desplazar el teclado a TextInput girado (estoy usando ScrollView con keyboardDismissMode prop):

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

uso:

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

Answer 7

El problema con el teclado no se descarta se vuelve más grave si tiene keyboardType=''numeric'' , ya que no hay forma de descartarlo.

Reemplazar la vista con ScrollView no es una solución correcta, ya que si tiene varias textInput o button , al tocarlos mientras el teclado está arriba solo se descartará el teclado.

La forma correcta es encapsular View con TouchableWithoutFeedback y llamar a Keyboard.dismiss()

EDITAR: ahora puede usar ScrollView con keyboardShouldPersistTaps=''handled'' para descartar el teclado solo cuando el toque no es manejado por los niños (es decir, tocando otras entradas de texto o botones)

Si usted tiene

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

Cámbialo 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: el accessible={false} es necesario para que el formulario de entrada siga siendo accesible a través de VoiceOver. ¡Las personas con discapacidad visual se lo agradecerán!

Answer 8

Hay algunas formas, si controlas un evento como onPress puedes usar:

keyboardShouldPersistTaps="handled" 

si desea cerrar el teclado cuando use el desplazamiento:

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;

Más opción es cuando el usuario hace clic fuera del teclado:

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

Answer 9

Hay muchas formas de manejar esto, las respuestas anteriores no incluyen returnType ya que no estaba incluido en react-native esa vez.

1: Puede resolverlo envolviendo sus componentes dentro de ScrollView, por defecto ScrollView cierra el teclado si presionamos en algún lugar. Pero en caso de que quiera usar ScrollView pero deshabilite este efecto. puede usar pointerEvent prop para scrollView pointerEvents = ''none'' .

2: Si desea cerrar el teclado al presionar un botón, puede usar el Keyboard desde react-native

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

3: También puede cerrar el teclado cuando hace clic en la tecla de retorno en el teclado, NOTA: si su tipo de teclado es numérico, no tendrá una tecla de retorno. Por lo tanto, puede habilitarlo dándole un apoyo, returnKeyType a done . o puede usar onSubmitEditing={Keyboard.dismiss} , se llama cada vez que presionamos la tecla de retorno. Y si desea descartar el teclado al perder el foco, puede usar onBlur prop, onBlur = {Keyboard.dismiss}

Answer 10

La respuesta simple es usar un ScrollView en lugar de View y establecer la propiedad desplazable en false (aunque podría necesitar un poco de estilo).

De esta manera, el teclado se descarta en el momento en que toco en otro lugar. Esto podría ser un problema con react-native, pero los eventos de tap solo parecen manejarse con ScrollViews, lo que conduce al comportamiento descrito.

Editar: Gracias a jllodra. Tenga en cuenta que si toca directamente en otra entrada de texto y luego afuera, el teclado aún no se ocultará.

Answer 11

Primer teclado de importación

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

Luego, dentro de su TextInput , agrega Keyboard.dismiss al accesorio onSubmitEditing . Deberías tener algo parecido a esto:

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

Answer 12

Puede importar el keyboard desde react-native como a continuación:

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

y en su código podría ser algo como esto:

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

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

despido estático ()

Descarta el teclado activo y elimina el foco.

Answer 13

Si alguien necesita un ejemplo práctico de cómo descartar una entrada de texto multilínea aquí ¡ya está! Espero que esto ayude a algunas personas, los documentos no describen una forma de descartar una entrada multilínea, al menos no había una referencia específica sobre cómo hacerlo. Todavía es un novato para publicar realmente aquí en la pila, si alguien piensa que esto debería ser una referencia a la publicación real para la que se escribió este fragmento, hágamelo saber.

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

Answer 14

Si no me equivoco, la última versión de React Native ha resuelto este problema de poder descartar el teclado tocando.

Answer 15

Soy nuevo en React y me encontré exactamente con el mismo problema al hacer una aplicación de demostración. Si usa el accesorio onStartShouldSetResponder (descrito here ), puede obtener toques en un viejo React.View . Curioso por escuchar los pensamientos de los Reactores más experimentados sobre esta estrategia / si hay una mejor, pero esto es lo que funcionó para mí:

import { Keyboard } from ''react-native'';

2 cosas a tener en cuenta aquí. Primero, como se discutió github.com/facebook/react-native/issues/113 , todavía no hay una manera de finalizar la edición de todas las subvistas, por lo que debemos referirnos directamente a TextInput para desdibujarlo. En segundo lugar, el onStartShouldSetResponder es interceptado por otros controles táctiles en la parte superior. Por lo tanto, hacer clic en un TouchableHighlight etc. (incluido otro TextInput ) dentro de la vista del contenedor no activará el evento. Sin embargo, al hacer clic en una Image dentro de la vista del contenedor, se cerrará el teclado.

Answer 16

Usando keyboardShouldPersistTaps en ScrollView puede pasar "manejado", que se ocupa de los problemas que la gente dice que viene con el uso de ScrollView. Esto es lo que dice la documentación sobre el uso de ''manejado'': the keyboard will not dismiss automatically when the tap was handled by a children, (or captured by an ancestor). Here es donde se hace referencia.

Answer 17

Use ScrollView lugar de View y configure el atributo keyboardShouldPersistTaps en falso.

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

Answer 18

Uso actualizado de ScrollView para React Native 0.39

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

Aunque, todavía hay un problema con dos cuadros TextInput . p.ej. Un formulario de nombre de usuario y contraseña ahora descartaría el teclado al cambiar entre entradas. Me encantaría recibir algunas sugerencias para mantener vivo el teclado al cambiar entre TextInputs mientras se usa ScrollView .

Answer 19

en uso ScrollView

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

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

Esto hará tu trabajo.

Answer 20

prueba keyboard.dismiss() . Funciono para mi

Answer 21

use esto para el despido personalizado

var dismissKeyboard = require(''dismissKeyboard'');

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

Answer 22

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

Utilizar

Keyboard.dismiss(0);

para ocultar el teclado

Answer 23

Keyboard.dismiss() lo hará. Pero a veces puede perder el foco y Keyboard no podrá encontrar la referencia. La forma más coherente de hacerlo es poner un ref=_ref en textInput y hacer _ref.blur() cuando necesite descartar, y _ref.focus() cuando necesite recuperar el teclado.

Answer 24

El módulo de teclado se usa para controlar eventos de teclado.

• import { Keyboard } from ''react-native''

• Agregue el siguiente código en el método de representación.

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

Puedes usar -

Keyboard.dismiss()

despido estático () Descarta el teclado activo y elimina el foco según los documentos nativos de reacción.

Answer 25

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

Enfoque n. ° 2;

Gracias al usuario @ ricardo-stuven por señalar esto, hay otra mejor manera de descartar el teclado que puede ver en el github.com/facebook/react-native/blob/… en los documentos nativos de reacción.

Importar Keyboard simple y llamar a su método dismiss()