Ukryj klawiaturę w środowisku reagującym

Jeśli dotknę wejścia tekstowego, chcę mieć możliwość stuknięcia w innym miejscu, aby ponownie zwolnić klawiaturę (ale nie klawisz powrotu). Nie znalazłem najmniejszych informacji na ten temat we wszystkich samouczkach i postach na blogu, które przeczytałem.

Ten podstawowy przykład wciąż nie działa dla mnie w środowisku Native 0.4.2 w Symulatorze. Nie mogłem jeszcze wypróbować tego na moim iPhonie.

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

Problem z nieodrzucaniem klawiatury staje się poważniejszy, jeśli masz keyboardType='numeric', ponieważ nie ma możliwości jej odrzucenia.

Zastąpienie widoku ScrollView nie jest prawidłowym rozwiązaniem, ponieważ jeśli masz wiele textInputs lub buttons, stuknięcie ich przy podniesionej klawiaturze spowoduje tylko zwolnienie klawiatury.

Prawidłowym sposobem jest hermetyzowanie widoku za pomocą TouchableWithoutFeedbacki wywoływaniaKeyboard.dismiss()

EDYCJA: Możesz teraz używać ScrollViewz, keyboardShouldPersistTaps='handled'aby zamknąć klawiaturę tylko wtedy, gdy dzieci nie obsługują stuknięcia (tj. Stukanie w inne wejścia tekstowe lub przyciski)

Jeśli masz

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

Zmień to na

<ScrollView contentContainerStyle={{flexGrow: 1}}
  keyboardShouldPersistTaps='handled'
>
  <TextInput keyboardType='numeric'/>
</ScrollView>

lub

import {Keyboard} from 'react-native'

<TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
    <View style={{flex: 1}}>
        <TextInput keyboardType='numeric'/>
    </View>
</TouchableWithoutFeedback>

EDYCJA: Możesz również utworzyć komponent wyższego rzędu, aby zamknąć klawiaturę.

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)

Po prostu użyj tego w ten sposób

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

UWAGA: accessible={false}jest to konieczne, aby formularz wprowadzania był nadal dostępny za pośrednictwem VoiceOver. Ludzie niedowidzący będą ci wdzięczni!

To właśnie zostało zaktualizowane i udokumentowane ! Nigdy więcej ukrytych sztuczek.

import { Keyboard } from 'react-native'

// Hide that keyboard!
Keyboard.dismiss()

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

użyj tego do niestandardowego zwolnienia

var dismissKeyboard = require('dismissKeyboard');

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

Użyj React Native's Keyboard.dismiss()

Zaktualizowana odpowiedź

React Native ujawnił dismiss()metodę statyczną Keyboard, więc zaktualizowana metoda to:

import { Keyboard } from 'react-native'; 

Keyboard.dismiss()

Oryginalna odpowiedź

Użyj dismissKeyboardbiblioteki React Native .

Miałem bardzo podobny problem i czułem, że tylko ja go nie dostałem.

ScrollViews

Jeśli masz ScrollView, lub cokolwiek, co dziedziczy po niej jak a ListView, możesz dodać rekwizyt, który automatycznie zwolni klawiaturę na podstawie naciśnięcia lub przeciągnięcia zdarzeń.

Podpora jest keyboardDismissModei może mieć wartość none, interactivealbo on-drag. Możesz przeczytać więcej na ten temat tutaj .

Regularne widoki

Jeśli masz coś innego niż a ScrollViewi chciałbyś, aby jakieś prasy odrzuciły klawiaturę, możesz użyć prostej TouchableWithoutFeedbacki onPressskorzystać z biblioteki narzędzi React Native, dismissKeyboardaby zwolnić klawiaturę.

W twoim przykładzie możesz zrobić coś takiego:

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>

Uwaga: TouchableWithoutFeedbackmoże mieć tylko jedno dziecko, więc musisz zawinąć wszystko pod nim w jedno, Viewjak pokazano powyżej.

Prostą odpowiedzią jest użycie ScrollView zamiast View i ustawienie właściwości przewijalnej na false (może być jednak konieczne dostosowanie niektórych stylów).

W ten sposób klawiatura zostaje zwolniona w momencie, gdy stukam gdzie indziej. Może to być problem z reakcją natywną, ale zdaje się, że zdarzenia dotknięcia są obsługiwane tylko przez ScrollViews, co prowadzi do opisanego zachowania.

Edycja: Dzięki jllodra. Pamiętaj, że jeśli dotkniesz bezpośrednio innego Textinput, a następnie na zewnątrz, klawiatura nadal się nie ukryje.

Możesz importować keyboard z responsive-native, jak poniżej:

import { Keyboard } from 'react-native';

a w twoim kodzie może być coś takiego:

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

statyczne odrzucenie ()

Zwalnia aktywną klawiaturę i usuwa fokus.

Jestem zupełnie nowy w React i napotkałem dokładnie ten sam problem podczas tworzenia aplikacji demonstracyjnej. Jeśli użyjesz onStartShouldSetResponderrekwizytu (opisanego tutaj ), możesz chwycić zwykły stary React.View. Ciekawi mnie, jak bardziej doświadczeni Reaktorzy zastanawiają się nad tą strategią / jeśli jest lepsza, ale to działało dla mnie:

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

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

2 rzeczy do odnotowania tutaj. Po pierwsze, jak omówiono tutaj , nie ma jeszcze sposobu na zakończenie edycji wszystkich widoków podrzędnych, więc musimy odwoływać się do TextInputbezpośrednio, aby go rozmazać. Po drugie, onStartShouldSetRespondersą przechwytywane przez inne dotykowe elementy sterujące na nim. Zatem kliknięcie TouchableHighlightitp. (W tym innej TextInput) w widoku kontenera nie spowoduje zdarzenia. Jednak kliknięcie Imagew widoku kontenera nadal powoduje zwolnienie klawiatury.

Użyj ScrollViewzamiast Viewi ustaw keyboardShouldPersistTapsatrybut na false.

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

Jeśli ktoś potrzebuje działającego przykładu, jak odrzucić wprowadzanie tekstu wielowierszowego tutaj, proszę! Mam nadzieję, że to pomaga niektórym ludziom, doktorzy w ogóle nie opisują sposobu na odrzucenie wielowierszowego wkładu, przynajmniej nie było konkretnego odniesienia do tego, jak to zrobić. Nadal jest to noob do zamieszczania tutaj na stosie, jeśli ktoś uważa, że ​​powinno to być odniesienie do faktycznego postu, dla którego ten fragment został napisany, daj mi znać.

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

Zaktualizowano użycie ScrollViewdlaReact Native 0.39

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

Chociaż nadal jest problem z dwoma TextInputpudełkami. na przykład. Nazwa użytkownika i hasło odłączyłyby teraz klawiaturę podczas przełączania między wejściami. Chciałbym uzyskać kilka wskazówek, aby utrzymać klawiaturę przy przełączaniu się TextInputspodczas korzystania z ScrollView.

Istnieje kilka sposobów kontrolowania zdarzenia, takich jak onPressmożna użyć:

import { Keyboard } from 'react-native'

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

jeśli chcesz zamknąć klawiaturę podczas przewijania:

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

Więcej opcji występuje, gdy użytkownik kliknie poza klawiaturą:

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

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

Podejście nr 2;

Dzięki użytkownikowi @ ricardo-stuven za wskazanie tego, istnieje inny lepszy sposób na zwolnienie klawiatury, który można zobaczyć w przykładzie w reakcyjnych natywnych dokumentach.

Prosty import Keyboardi wywołanie metodydismiss()

Zawijanie komponentów TouchableWithoutFeedbackmoże powodować dziwne zachowanie przewijania i inne problemy. Wolę, by zakończyć moją najwyższą aplikację w sposób Viewz onStartShouldSetResponderwłasności wypełnione. To pozwoli mi obsłużyć wszystkich nieobsłużonych poprawki, a następnie schować klawiaturę. Co ważne, ponieważ funkcja modułu obsługi zwraca wartość false, zdarzenie dotyku jest propagowane jak zwykle.

 handleUnhandledTouches(){
   Keyboard.dismiss
   return false;
 }

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

Właśnie przetestowałem to przy użyciu najnowszej wersji React Native (0.4.2), a klawiatura zostanie zwolniona po stuknięciu w innym miejscu.

I FYI: możesz ustawić funkcję wywołania zwrotnego, która będzie wykonywana po zwolnieniu klawiatury, przypisując ją do propa „onEndEditing”.

Jeśli się nie mylę, najnowsza wersja React Native rozwiązała problem polegający na możliwości zwolnienia klawiatury poprzez stuknięcie.

Co powiesz na umieszczenie dotykalnego elementu wokół / obok 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>
        )
    }
}

Owiń cały komponent:

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

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

Pracował dla mnie

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

Posługiwać się

Keyboard.dismiss(0);

aby ukryć klawiaturę.

Moduł klawiatury służy do sterowania zdarzeniami na klawiaturze.

• import { Keyboard } from 'react-native'

• Dodaj poniższy kod w metodzie renderowania.

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

Możesz użyć -

Keyboard.dismiss()

static replaceiss () Odrzuca aktywną klawiaturę i usuwa fokus, zgodnie z reakcją rodzimych dokumentów.

Najpierw zaimportuj klawiaturę

import { Keyboard } from 'react-native'

Następnie TextInputdodaj Keyboard.dismissdo onSubmitEditingrekwizytu. Powinieneś mieć coś, co wygląda tak:

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

Używając keyboardShouldPersistTapsw tym ScrollViewmożna przekazać „obsłużony”, który zajmuje się problemami, które mówią ludzie, związane z używaniem ScrollView. Oto, co dokumentacja mówi o używaniu „obsłużonego”: the keyboard will not dismiss automatically when the tap was handled by a children, (or captured by an ancestor). tutaj jest odniesienie.

w ScrollViewużyciu

keyboardShouldPersistTaps="handled" 

To spełni twoje zadanie.

Istnieje wiele sposobów, aby sobie z tym poradzić, powyższe odpowiedzi nie obejmują, returnTypeponieważ nie zostały uwzględnione w tym czasie w trybie macierzystym.

1: Możesz to rozwiązać, zawijając komponenty w ScrollView, domyślnie ScrollView zamyka klawiaturę, jeśli gdzieś naciśniemy. Ale jeśli chcesz użyć ScrollView, ale wyłącz ten efekt. możesz użyć prop pointerEvent do scrollView pointerEvents = 'none'.

2: Jeśli chcesz zamknąć klawiaturę po naciśnięciu przycisku, możesz po prostu użyć Keyboardzreact-native

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

3: Możesz także zamknąć klawiaturę po kliknięciu klawisza Return na klawiaturze, UWAGA: jeśli typ klawiatury jest numeryczny, nie będziesz miał klawisza Return. Możesz go włączyć, podając prop, returnKeyType na done. lub możesz użyć onSubmitEditing={Keyboard.dismiss}, Zostanie wywołany za każdym razem, gdy naciśniemy klawisz powrotu. A jeśli chcesz zwolnić klawiaturę po utracie ostrości, możesz użyć prop onBlur,onBlur = {Keyboard.dismiss}

Keyboard.dismiss()zrobię to. Ale czasami może stracić ostrość i klawiatura nie będzie w stanie znaleźć referencji. Najbardziej konsekwentnym sposobem jest wstawienie parametru ref=_refdo textInput i zrobienie tego, _ref.blur()gdy trzeba go zamknąć i _ref.focus()przywrócić klawiaturę.

wypróbować keyboard.dismiss(). To zadziałało dla mnie

Oto moje rozwiązanie usuwania klawiatury i przewijania do stukniętego TextInput (używam ScrollView z propozycją 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;

stosowanie:

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

użyj tego pakietu react-native-keyboard-aware-scroll-view

użyj tego komponentu jako komponentu głównego

ponieważ ten pakiet react-native-keyboard-aware-scroll-viewma również scrollView, musisz dodać do niego:

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