Ocultar teclado no react-native

Se eu tocar em uma entrada de texto, desejo poder tocar em outro lugar para descartar o teclado novamente (mas não a tecla de retorno). Não encontrei a menor informação sobre isso em todos os tutoriais e postagens do blog que li.

Este exemplo básico ainda não está funcionando para mim com o 0.4.2 react-native no Simulator. Ainda não foi possível experimentá-lo no meu iPhone.

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

O problema com o teclado não dispensar fica mais grave se você tiver keyboardType='numeric' , pois não há como descartá-lo.

Substituir o View pelo ScrollView não é uma solução correta, como se você tivesse vários textInputs ou buttons, tocar neles enquanto o teclado estiver levantado só descartará o teclado.

A maneira correta é encapsular o View com TouchableWithoutFeedbacke chamarKeyboard.dismiss()

EDIT: Agora você pode usar ScrollViewcom keyboardShouldPersistTaps='handled'para descartar o teclado apenas quando a torneira não é manuseada pelas crianças (por exemplo, tocando em outros textos).

Se você tem

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

Mude para

<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: Você também pode criar um componente de ordem superior para descartar o 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)

Basta usá-lo assim

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

NOTA: accessible={false}é necessário para que o formulário de entrada continue acessível pelo VoiceOver. Pessoas com deficiência visual agradecerão!

Isso acabou de ser atualizado e documentado ! Não há mais truques ocultos.

import { Keyboard } from 'react-native'

// Hide that keyboard!
Keyboard.dismiss()

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

use isso para dispensa personalizada

var dismissKeyboard = require('dismissKeyboard');

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

Use o React Native Keyboard.dismiss()

Resposta atualizada

O React Native expôs o dismiss()método estático no Keyboard, portanto, o método atualizado é:

import { Keyboard } from 'react-native'; 

Keyboard.dismiss()

Resposta original

Use o React Native dismissKeyboard biblioteca .

Eu tive um problema muito semelhante e senti que era o único que não entendia.

ScrollViews

Se você tem um ScrollView, ou qualquer coisa que herda dele como um ListView, você pode adicionar um suporte que descartará automaticamente o teclado com base em eventos de pressionar ou arrastar.

O suporte é keyboardDismissModee pode ter um valor de none, interactiveou on-drag. Você pode ler mais sobre isso aqui .

Visualizações regulares

Se você tiver algo diferente de a ScrollViewe desejar pressionar o teclado, use um simples TouchableWithoutFeedbacke onPressuse a biblioteca de utilitários do React Native dismissKeyboardpara dispensar o teclado para você.

No seu exemplo, você pode fazer algo assim:

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: TouchableWithoutFeedbacksó pode ter um único filho, portanto, você precisa agrupar tudo abaixo dele em um único, Viewcomo mostrado acima.

A resposta simples é usar um ScrollView em vez de View e definir a propriedade rolável como false (pode ser necessário ajustar alguns estilos).

Dessa forma, o teclado é dispensado no momento em que toco em outro lugar. Isso pode ser um problema no react-native, mas os eventos de toque parecem ser tratados apenas com o ScrollViews, o que leva ao comportamento descrito.

Edit: Graças a jllodra. Observe que, se você tocar diretamente em outra entrada de texto e depois sair, o teclado ainda não será oculto.

Você pode importar keyboard do react-native como abaixo:

import { Keyboard } from 'react-native';

e no seu código pode ser algo como isto:

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

rejeição estática ()

Ignora o teclado ativo e remove o foco.

Sou novato no React e tive exatamente o mesmo problema ao criar um aplicativo de demonstração. Se você usar o onStartShouldSetRespondersuporte (descrito aqui ), poderá tocar em um velho simples React.View. Curioso para ouvir os pensamentos dos Reagentes mais experientes sobre essa estratégia / se houver uma melhor, mas é isso que funcionou para mim:

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

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

2 coisas a serem observadas aqui. Primeiro, como discutido aqui , ainda não há uma maneira de terminar a edição de todas as subvisões, portanto, precisamos nos referir TextInputdiretamente ao para desfocá-lo. Segundo, ele onStartShouldSetResponderé interceptado por outros controles palpáveis ​​sobre ele. Portanto, clicar em um TouchableHighlightetc (incluindo outro TextInput) na visualização do contêiner não acionará o evento. No entanto, clicar em uma Imageexibição dentro do contêiner ainda descartará o teclado.

Use em ScrollViewvez de Viewe defina o keyboardShouldPersistTapsatributo como false.

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

Se alguém precisar de um exemplo prático de como descartar uma entrada de texto com várias linhas, aqui está! Espero que isso ajude algumas pessoas por aí, os documentos não descrevem uma maneira de descartar uma entrada de várias linhas, pelo menos não houve referência específica sobre como fazê-lo. Ainda é um noob para realmente postar aqui na pilha, se alguém achar que isso deve ser uma referência à postagem real em que este snippet foi escrito para me avisar.

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

Uso atualizado de ScrollViewparaReact Native 0.39

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

Embora ainda haja um problema com duas TextInputcaixas. por exemplo. Um formulário de nome de usuário e senha agora descartaria o teclado ao alternar entre entradas. Gostaria de receber algumas sugestões para manter o teclado ativo ao alternar entre TextInputsenquanto usa um ScrollView.

Existem algumas maneiras, se você controla um evento como onPressvocê pode usar:

import { Keyboard } from 'react-native'

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

se você deseja fechar o teclado quando usar a rolagem:

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

Mais opção é quando o usuário clica fora do teclado:

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

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

Abordagem nº 2;

Obrigado ao usuário @ ricardo-stuven por apontar isso, há outra maneira melhor de descartar o teclado que você pode ver no exemplo nos documentos nativos do react.

Importação simples Keyboarde chame seu métododismiss()

A quebra de seus componentes em um TouchableWithoutFeedbackpode causar um comportamento estranho de rolagem e outros problemas. Prefiro agrupar meu aplicativo superior em um Viewcom a onStartShouldSetResponderpropriedade preenchida. Isso me permitirá lidar com todos os toques sem tratamento e depois dispensar o teclado. É importante ressaltar que, como a função do manipulador retorna false, o evento touch é propagado como normal.

 handleUnhandledTouches(){
   Keyboard.dismiss
   return false;
 }

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

Acabei de testar isso usando a versão mais recente do React Native (0.4.2), e o teclado é descartado quando você toca em outro lugar.

E FYI: você pode definir uma função de retorno de chamada a ser executada quando você ignora o teclado, atribuindo-o ao suporte "onEndEditing".

Se não me engano, a versão mais recente do React Native resolveu esse problema de poder descartar o teclado tocando.

Que tal colocar um componente palpável ao redor / ao lado do 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>
        )
    }
}

Enrole todo o seu componente com:

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

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

Trabalhou para mim

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

Usar

Keyboard.dismiss(0);

ocultar o teclado.

O módulo do teclado é usado para controlar eventos do teclado.

• import { Keyboard } from 'react-native'

• Adicione o código abaixo no método de renderização.

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

Você pode usar -

Keyboard.dismiss()

descarte estático () Descarta o teclado ativo e remove o foco conforme reage aos documentos nativos.

Primeira importação do teclado

import { Keyboard } from 'react-native'

Então, dentro do seu, TextInputvocê adiciona Keyboard.dismissao onSubmitEditingsuporte. Você deve ter algo parecido com isto:

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

Usando keyboardShouldPersistTapsno ScrollViewvocê pode passar "manipulado", que lida com os problemas que as pessoas estão dizendo que vêm com o uso do ScrollView. Isto é o que a documentação diz sobre o uso de 'manipulado': the keyboard will not dismiss automatically when the tap was handled by a children, (or captured by an ancestor). Aqui é onde é referenciado.

em ScrollViewuso

keyboardShouldPersistTaps="handled" 

Isso fará o seu trabalho.

Existem várias maneiras de lidar com isso, as respostas acima não incluem, returnTypepois não foram incluídas no nativo do reagir naquele momento.

1: Você pode resolvê-lo envolvendo seus componentes dentro do ScrollView; por padrão, o ScrollView fecha o teclado se pressionarmos em algum lugar. Mas, caso você queira usar o ScrollView, desative esse efeito. você pode usar prop pointerEvent para scrollView pointerEvents = 'none'.

2: Se você deseja fechar o teclado pressionando um botão, basta usar a Keyboardpartir dereact-native

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

3: Você também pode fechar o teclado ao clicar na tecla de retorno do teclado. NOTA: se o seu tipo de teclado for numérico, você não terá uma tecla de retorno. Portanto, você pode habilitá-lo fornecendo uma proposta, returnKeyType paradone . ou você pode usar onSubmitEditing={Keyboard.dismiss}, ele é chamado sempre que pressionamos a tecla Enter. E se você quiser descartar o teclado ao perder o foco, poderá usar o suporte onBlur,onBlur = {Keyboard.dismiss}

Keyboard.dismiss()vai fazer isso. Mas, às vezes, pode perder o foco e o Teclado não conseguirá encontrar o árbitro. A maneira mais consistente de fazer isso é colocar um ref=_refno textInput e fazê- _ref.blur()lo quando precisar dispensar e _ref.focus()quando precisar devolver o teclado.

experimente keyboard.dismiss(). Funcionou para mim

Aqui está minha solução para descartar e rolar o teclado para TextInput tocado (estou usando o ScrollView com o suporte 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;

uso:

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

use este pacote react-native-keyboard-aware-scroll-view

use esse componente como seu componente raiz

Como este pacote react-native-keyboard-aware-scroll-viewtambém possui um scrollView, você precisa adicioná-lo a ele:

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