Ukryj klawiaturę w środowisku reagującym

448

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>
TurboFish
źródło
3
Spróbuj rozmycia (): github.com/facebook/react-native/issues/113
herbertD
Prawidłowa odpowiedź powinna brzmieć od Erica Kim poniżej. Odpowiedź ScrollView (ustawiona na przewijaną na wartość false) nie jest idealna, jeśli masz wiele sposobów wprowadzania tekstu, nie pozwala przeskakiwać z wprowadzania tekstu na tekst bez zwolnienia klawiatury.
hippofluff,
2
Dla tych, którzy chcą rozwiązania dla całej aplikacji, patrz odpowiedź @ Scottmas poniżej. (Link: stackoverflow.com/a/49825223/1138273 )
Hamed

Odpowiedzi:

563

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!

Eric Kim
źródło
28
To świetnie, jedyny komentarz, jaki mam, to to, że mogłeś użyć oficjalnego interfejsu API Keyboard w RN i wywołać Keyboard.dismiss () zamiast wywoływać jakieś wewnętrzne narzędzie RN DISISSKeyboard (). Ale oba działają obecnie dobrze.
Pavle Lekic,
@PavleLekic Przepraszamy za opóźnienie, zaktualizowałem odpowiedź wraz z metodą HOC
Eric Kim
3
To działa świetnie. Musiałem trochę zmienić składnię w definicji funkcji strzałki, aby usunąć nieoczekiwany błąd tokena w RN: const DismissKeyboardHOC = (Comp) => {
jwinn
2
Nie mogę dostać się onPressdo TouchableWithoutFeedbackpożaru bez względu na to, co próbuję
Brad Ryan
1
Po co tworzyć HoC i po prostu dodać to w katalogu głównym drzewa aplikacji /
Dimitri Kopriwa
248

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

Gant Laborde
źródło
4
Dzięki za dodanie tego. Mam nadzieję, że twoja odpowiedź wzrośnie do góry. Prawie mi tego brakowało i użyłem przestarzałego rozwiązania.
owczarek
2
Pingowanie @MrMuetze, aby zmienić to jako poprawną odpowiedź
jehna1
8
To nie powinna być wybrana najlepsza odpowiedź. Pytanie dotyczy tego, jak usunąć klawiaturę, gdy stukniesz poza nią. Ta odpowiedź zapewnia po prostu interfejs API, a najlepsza odpowiedź zapewnia wykonalną implementację.
jskidd3,
możesz użyć następnej biblioteki: KeyboardAwareScrollView
Alejandro Gonzalez
97

użyj tego do niestandardowego zwolnienia

var dismissKeyboard = require('dismissKeyboard');

var TestView = React.createClass({
    render: function(){
        return (
            <TouchableWithoutFeedback 
                onPress={dismissKeyboard}>
                <View />
            </TouchableWithoutFeedback>
        )
    }
})
syarul
źródło
Nie jest to udokumentowane, ale próbki w repozytorium github z reakcją natywną używają go kilka razy.
syarul
7
Ciekawe, dla tych, którzy są ciekawi, skąd pochodzi, to biblioteka Utility w React Native. Oto źródło: github.com/facebook/react-native/blob/master/Libraries/…
Joshua Pinter
1
Z jakiegoś powodu to nie zadziałało, kiedy próbowałem zreact-native-search-bar
Peter G.
Jest to dokładny odpowiednik Keyboard.dismiss, który jest preferowany, ponieważ jest udokumentowany. github.com/facebook/react-native/blob/…
Ricardo Stuven
88

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.

Joshua Pinter
źródło
4
React Native narażony statyczną dismiss()metodę na klawiaturze, tak zaktualizowana metoda jest: import { Keyboard } from 'react-native'; Keyboard.dismiss().
Joshua Pinter
1
Mam klawiaturę, która kręci się od czasu, gdy przeładowałem, skupiając się na polu wejściowym. w tym przypadku Keyboard.dismiss()nic nie robi, ponieważ jego wdrożenie zależy od skupienia się na danych wejściowych, którymi już nie jestem.
pstanton
@pstanton Co zatem musiałeś zrobić, aby zwolnić klawiaturę?
Joshua Pinter
Nie mogłem znaleźć, więc zmuszam się do zamknięcia!
pstanton
41

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.

TurboFish
źródło
1
Działa z widokiem przewijania, ale wciąż zdarzają się przypadki, w których mogę kliknąć przycisk, aby zmienić widok za pomocą nawigatora, a klawiatura wciąż trzyma się na dole i trzeba ręcznie kliknąć klawisz powrotu, aby go zamknąć :(
Piyush Chauhan
1
Klawiatura ukrywa się po stuknięciu poza TextInput, ale jeśli (zamiast stuknięcia na zewnątrz) stukniesz w inny TextInput, a na koniec stukniesz na zewnątrz, klawiatura się nie ukryje. Testowane na 0.6.0.
jllodra
Widzę teraz inne zachowanie. Stuknięcie poza TextInput ukrywa klawiaturę, nawet jeśli stuknę bezpośrednio w inny TextInput - co jest problemem, ponieważ musisz nacisnąć dwukrotnie inny TextInput, aby móc pisać na nim! Westchnienie. (z RN 0,19)
Lane Rettig
1
Możesz ustawić przewijanie na wartość true i użyć keyboardShouldPersistTaps = {'obsługiwane'} i keyboardDismissMode = {'on-drag'}, aby osiągnąć ten sam efekt
Eric Wiener
działał dla mnie tylko widok przewijania Nie wiem dlaczego, zaakceptowana odpowiedź, gdy wprowadzam klawisze numeryczne, odrzuca
Yvon Huynh
33

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.

Alireza
źródło
I nie potrzeba static dismiss(). Właśnie dodałem Keyboard.dismiss()do mojej metody onSubmit (gdzieonSubmitEditing={() => {this.onSubmit()}})
SherylHohman
30

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.

hunteros
źródło
To na pewno działa. Ale jak powiedziałeś, jestem również ciekawy, czy to właściwy sposób. Mam nadzieję, że wkrótce to rozwiążą ( github.com/facebook/react-native/issues/113 )
mutp
Świetnie, to działało dla mnie. Mój widok przewijania nie działa z dotykowymi metodami! Dzięki!
James Trickey
24

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>
Tyler McGinnis
źródło
Zgodnie z dokumentacją, keyboardShouldPersistTapsdomyślnie atrybut ma wartość false, gdy używasz ScrollView. Właśnie zaktualizowałem moją reakcyjną wersję macierzystą do najnowszej wersji i problem z przejściem na sekundę TextInputnadal występuje. Klawiatura nie jest zatem niedopuszczalna. Czy znalazłeś rozwiązanie tego konkretnego problemu?
TurboFish,
1
Dokumenty były niepoprawne, ale zostały zaktualizowane, zobacz ten PR: github.com/facebook/react-native/issues/2150
Ryan McDermott,
Co ma keyboardShouldPersistTapszrobić? Dlaczego ma to znaczenie tutaj? Dzięki
Lane Rettig,
1
Ostrzeżenie: „keyboardShouldPersistTaps = {false}” jest przestarzałe. Zamiast tego użyj „keyboardShouldPersistTaps =„ never ””
Milan Rakos
13

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>
    )
  }
}
Austin Reynolds
źródło
11

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.

Anshul Koka
źródło
3
Wydaje się, że 0.40aktualizacje keyboardShouldPersistTapsod a booleando enumz możliwą wartością „obsłużoną”, co powinno to naprawić.
Anshul Koka
11

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>
Idan
źródło
1
Ludzie, pytanie jest nadal aktualne, ale pytanie ma 4 lata (teraz koniec 2019 r.). RN jest teraz bardzo prosty i łatwy w użyciu. Musimy przejrzeć wszystkie umiejętności, z pomocą których możemy znaleźć rozwiązanie tego pytania. Głosuj ten komentarz!
Link
@ Link Cześć dzięki! Absolutnie się zgadzam
Idan
10
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()

Adeel Imran
źródło
1
Jest to dokładny odpowiednik Keyboard.dismiss, który jest preferowany, ponieważ jest udokumentowany. github.com/facebook/react-native/blob/…
Ricardo Stuven
W chwili udzielenia odpowiedzi nie było to udokumentowane. Dzięki, że o tym wspomniałeś. Zaktualizuję moją odpowiedź.
Adeel Imran
10

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>
  }
Scottmas
źródło
Dzięki za odpowiedź @Scottmas. Skończyło się na tym, że użyłem go zamiast TouchableWithoutFeedback, z powodu twojego komentarza dotyczącego „dziwnego przewijania i innych problemów”. Ale jeśli nie ślepo ufałem twoim słowom, czy mógłbyś rozwinąć swój komentarz? :)
kuhr
8

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

Jonathan Huang
źródło
Debugowałem wywołanie zwrotne „onEndEditing”, ale nigdy wcześniej się nie uruchamiało;
Zajmę
7

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

Christopherdro
źródło
4
Czy byłbyś w stanie wskazać, która część ich kodu / dokumentu to robi? Napotykam na ten sam problem i naprawdę doceniam, że wskazuje mi kierunek :)
Okazaki Miyama Yuta
Potwierdzono, że jest to nadal problem od RN 0,19 (najnowszy).
Lane Rettig
Nadal problem z 0,28 RN
hippofluff,
7

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>
        )
    }
}
znudzone gry
źródło
6

Owiń cały komponent:

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

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

Pracował dla mnie

Arthur Mastropietro
źródło
4

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.

abhinandan sharma
źródło
3

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>
  )  
}
Nagendra kr.
źródło
2

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.

Samuel
źródło
To zadziałało dla mnie! (jednak musiałem dodać go w mojej bibliotece innej firmy react-native-keyboard-aware-scroll-view).
Nick Grealy
1

w ScrollViewużyciu

keyboardShouldPersistTaps="handled" 

To spełni twoje zadanie.

gamingumar
źródło
1

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}

Sarmad Shah
źródło
0

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

Bruce Xinda Lin
źródło
0

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

Amoli
źródło
0

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

Artem Szewcow
źródło
0

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>

Cyrus Zei
źródło