Nascondi tastiera in reagente nativo

Se tocco su un input di testo, voglio essere in grado di toccare altrove per chiudere nuovamente la tastiera (non il tasto Invio). Non ho trovato la minima informazione al riguardo in tutti i tutorial e post di blog che ho letto.

Questo esempio di base non funziona ancora con me con Reazione nativa 0.4.2 nel Simulatore. Non posso ancora provarlo sul mio 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>

Il problema con la tastiera che non si elimina diventa più grave se si dispone keyboardType='numeric', in quanto non è possibile ignorarlo.

Sostituire la vista con ScrollView non è una soluzione corretta, come se si dispone di più textInputS o buttonS, toccandoli mentre la tastiera è in alto si eliminerà solo la tastiera.

Il modo corretto è di incapsulare View con TouchableWithoutFeedbacke chiamandoKeyboard.dismiss()

EDIT: ora puoi usare ScrollViewcon keyboardShouldPersistTaps='handled'per chiudere la tastiera solo quando il tocco non è gestito dai bambini (es. Toccando altri input o pulsanti di testo)

Se hai

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

Modificalo in

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

EDIT: è inoltre possibile creare un componente di ordine superiore per chiudere la tastiera.

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)

Usalo semplicemente così

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

NOTA: accessible={false}è necessario per rendere accessibile il modulo di input tramite VoiceOver. Le persone ipovedenti ti ringrazieranno!

Questo è appena stato aggiornato e documentato ! Niente più trucchi nascosti.

import { Keyboard } from 'react-native'

// Hide that keyboard!
Keyboard.dismiss()

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

usalo per il licenziamento personalizzato

var dismissKeyboard = require('dismissKeyboard');

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

Usa React Native's Keyboard.dismiss()

Risposta aggiornata

React Native ha esposto il dismiss()metodo statico su Keyboard, quindi il metodo aggiornato è:

import { Keyboard } from 'react-native'; 

Keyboard.dismiss()

Risposta originale

Usa la dismissKeyboardlibreria di React Native .

Ho avuto un problema molto simile e mi sono sentito come l'unico a non averlo capito.

ScrollViews

Se hai un ScrollView, o qualcosa che eredita da esso come un ListView, puoi aggiungere un oggetto che disattiverà automaticamente la tastiera in base alla pressione o al trascinamento degli eventi.

Il prop è keyboardDismissModee può avere un valore di none, interactiveo on-drag. Puoi leggere di più su questo qui .

Visualizzazioni regolari

Se hai qualcosa di diverso da a ScrollViewe desideri premere qualsiasi tasto per chiudere la tastiera, puoi usare un semplice TouchableWithoutFeedbacke onPressutilizzare la libreria di utilità di React Native dismissKeyboardper chiudere la tastiera.

Nel tuo esempio, potresti fare qualcosa del genere:

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: TouchableWithoutFeedbackpuoi avere un solo figlio quindi devi avvolgere tutto sotto di esso in un singolo Viewcome mostrato sopra.

La semplice risposta è utilizzare un ScrollView invece di Visualizza e impostare la proprietà scorrevole su false (potrebbe essere necessario regolare alcuni stili).

In questo modo, la tastiera viene ignorata nel momento in cui tocco da qualche altra parte. Questo potrebbe essere un problema con reagente nativo, ma gli eventi di tocco sembrano essere gestiti solo con ScrollViews che porta al comportamento descritto.

Modifica: grazie a jllodra. Si noti che se si tocca direttamente un altro input di testo e quindi all'esterno, la tastiera continua a non nascondersi.

Puoi importare keyboard da Reattivo nativo come di seguito:

import { Keyboard } from 'react-native';

e nel tuo codice potrebbe essere qualcosa del genere:

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

rifiuto statico ()

Ignora la tastiera attiva e rimuove lo stato attivo.

Sono nuovo di zecca su React e ho riscontrato lo stesso identico problema durante la creazione di un'app demo. Se usi l' onStartShouldSetResponderelica (descritta qui ), puoi prendere dei tocchi su un semplice vecchio React.View. Curioso di ascoltare i pensieri dei Reaperer più esperti su questa strategia / se ce n'è una migliore, ma questo è ciò che ha funzionato per me:

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

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

2 cose da notare qui. In primo luogo, come discusso qui , non c'è ancora un modo per terminare la modifica di tutte le visualizzazioni secondarie, quindi dobbiamo fare riferimento TextInputdirettamente a per sfocarlo. In secondo luogo, onStartShouldSetResponderviene intercettato da altri controlli tangibili al di sopra di esso. Quindi facendo clic su un TouchableHighlightetc (incluso un altro TextInput) all'interno della vista contenitore non si attiva l'evento. Tuttavia, facendo clic su Imageall'interno della vista contenitore, la tastiera verrà comunque chiusa.

Utilizzare ScrollViewinvece di Viewe impostare l' keyboardShouldPersistTapsattributo su false.

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

Se qualcuno ha bisogno di un esempio funzionante di come respingere un input di testo multilinea qui, vai! Spero che questo aiuti alcune persone là fuori, i documenti non descrivono affatto un modo per respingere un input multilinea, almeno non c'erano riferimenti specifici su come farlo. Ancora un noob per pubblicare effettivamente qui nello stack, se qualcuno pensa che questo dovrebbe essere un riferimento al post effettivo per cui questo frammento è stato scritto, fammelo sapere.

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 aggiornato di ScrollViewperReact Native 0.39

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

Tuttavia, c'è ancora un problema con due TextInputcaselle. per esempio. Un modulo di nome utente e password ora eliminerebbe la tastiera quando si passa da un input all'altro. Mi piacerebbe avere qualche suggerimento per mantenere viva la tastiera quando si passa da TextInputsmentre si usa a ScrollView.

Ci sono alcuni modi, se controlli eventi come quelli onPressche puoi usare:

import { Keyboard } from 'react-native'

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

se vuoi chiudere la tastiera quando usi lo scorrimento:

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

Altre opzioni sono quando l'utente fa clic all'esterno della tastiera:

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

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

Approccio n. 2;

Grazie all'utente @ ricardo-stuven per averlo sottolineato, c'è un altro modo migliore di chiudere la tastiera che puoi vedere nell'esempio nei documenti nativi di reazione.

Importa Keyboarde chiama semplicemente il suo metododismiss()

Avvolgere i componenti in a TouchableWithoutFeedbackpuò causare strani comportamenti di scorrimento e altri problemi. Preferisco racchiudere la mia app più in alto in a Viewcon la onStartShouldSetResponderproprietà compilata. Questo mi permetterà di gestire tutti i tocchi non gestiti e quindi chiudere la tastiera. È importante sottolineare che, poiché la funzione del gestore restituisce false, l'evento touch viene propagato come al solito.

 handleUnhandledTouches(){
   Keyboard.dismiss
   return false;
 }

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

Ho appena provato questo utilizzando l'ultima versione di React Native (0.4.2) e la tastiera viene ignorata quando si tocca altrove.

E FYI: è possibile impostare una funzione di callback da eseguire quando si chiude la tastiera assegnandola al puntello "onEndEditing".

Se non sbaglio, l'ultima versione di React Native ha risolto il problema di poter chiudere la tastiera toccando.

Che ne dici di posizionare un componente toccabile attorno / accanto al 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>
        )
    }
}

Avvolgi l'intero componente con:

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

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

Ha funzionato per me

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

Uso

Keyboard.dismiss(0);

per nascondere la tastiera.

Il modulo tastiera viene utilizzato per controllare gli eventi della tastiera.

• import { Keyboard } from 'react-native'

• Aggiungi sotto il codice nel metodo di rendering.

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

Puoi usare -

Keyboard.dismiss()

static dismiss () Ignora la tastiera attiva e rimuove lo stato attivo secondo i documenti nativi di reazione.

Prima tastiera di importazione

import { Keyboard } from 'react-native'

Poi all'interno del vostro TextInputsi aggiunge Keyboard.dismissal onSubmitEditingpuntello. Dovresti avere qualcosa che assomigli a questo:

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

Usando keyboardShouldPersistTapsin ScrollViewpuoi passare in "gestito", che affronta i problemi che le persone stanno dicendo viene con l'utilizzo di ScrollView. Questo è ciò che dice la documentazione sull'uso di "gestito": the keyboard will not dismiss automatically when the tap was handled by a children, (or captured by an ancestor). qui è dove si fa riferimento.

in ScrollViewuso

keyboardShouldPersistTaps="handled" 

Questo farà il tuo lavoro.

Ci sono molti modi in cui puoi gestirlo, le risposte sopra non includono returnTypepoiché non era incluso in reag-native in quel momento.

1: è possibile risolverlo avvolgendo i componenti all'interno di ScrollView, per impostazione predefinita ScrollView chiude la tastiera se si preme da qualche parte. Ma nel caso in cui si desideri utilizzare ScrollView ma disabilitare questo effetto. puoi usare pointerEvent prop per scrollView pointerEvents = 'none'.

2: Se vuoi chiudere la tastiera premendo un pulsante, puoi semplicemente usare Keyboarddareact-native

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

3: Puoi anche chiudere la tastiera quando fai clic sul tasto Invio sulla tastiera, NOTA: se il tipo di tastiera è numerico, non avrai un tasto Invio. Quindi, puoi abilitarlo dandogli un oggetto, returnKeyType a done. o potresti usare onSubmitEditing={Keyboard.dismiss}, viene chiamato ogni volta che premiamo il tasto Invio. E se vuoi chiudere la tastiera quando perdi lo stato attivo, puoi usare il prop onBlur,onBlur = {Keyboard.dismiss}

Keyboard.dismiss()lo farà. Ma a volte può perdere la messa a fuoco e la tastiera non sarà in grado di trovare il riferimento. Il modo più coerente di fare è mettere ref=_refa textInput e fare _ref.blur()quando è necessario chiudere e _ref.focus()quando è necessario ripristinare la tastiera.

prova keyboard.dismiss(). Ha funzionato per me

Ecco la mia soluzione per chiudere la tastiera e scorrere fino a TextInput toccato (sto usando ScrollView con la tastiera DismissMode 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;

utilizzo:

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

usa questo pacchetto react-native-keyboard-aware-scroll-view

usa quel componente come componente principale

poiché questo pacchetto ha react-native-keyboard-aware-scroll-viewanche un scrollView è necessario aggiungerlo:

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