Скрыть клавиатуру в react-native

avatar
TurboFish
16 апреля 2015 в 20:33
292732
33
586

Если я нажимаю на ввод текста, я хочу иметь возможность нажать где-нибудь еще, чтобы снова закрыть клавиатуру (но не клавишу возврата). Я не нашел ни малейшей информации по этому поводу во всех обучающих материалах и сообщениях в блогах, которые я читал.

Этот базовый пример все еще не работает для меня с react-native 0.4.2 в Симуляторе. Не могу пока попробовать на своем 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>
Источник
herbertD
13 марта 2016 в 04:16
3

Попробуйте blur (): github.com/facebook/react-native/issues/113

hippofluff
19 августа 2016 в 13:50
0

Правильный ответ должен быть от Эрика Кима ниже. Ответ ScrollView (установите для прокрутки значение false) не идеален, если у вас есть несколько вводов текста, он не позволяет вам переходить от ввода текста к вводу текста без закрытия клавиатуры.

Hamed
9 апреля 2019 в 06:59
3

Для тех, кому нужно решение для всего приложения, см. Ответ @ Scottmas ниже (ссылка: coderhelper.com/a/49825223/1138273)

TripleM
31 июля 2020 в 06:46
0

keyboard.dismiss() - это то, что вы ищете.

Ridwan Ajibola
22 июля 2021 в 12:14
0

ознакомьтесь с этой ссылкой, чтобы узнать, как это делается coderhelper.com/a/68484617/12482704

Ответы (33)

avatar
Eric Kim
14 января 2016 в 00:09
737

Проблема с отключением клавиатуры становится еще более серьезной, если у вас есть keyboardType='numeric', поскольку нет возможности закрыть ее.

Замена View на ScrollView не является правильным решением, так как если у вас есть несколько textInput или button, нажатие на них при поднятой клавиатуре приведет только к отключению клавиатуры.

Правильный способ - инкапсулировать View с помощью TouchableWithoutFeedback и вызвать Keyboard.dismiss()

РЕДАКТИРОВАТЬ: теперь вы можете использовать ScrollView с keyboardShouldPersistTaps='handled', чтобы закрывать клавиатуру только тогда, когда нажатие не обрабатывается дочерними элементами (например, нажатие на другие текстовые входы или кнопки)

Если у вас

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

Измените его на

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

или

import {Keyboard} from 'react-native'

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

РЕДАКТИРОВАТЬ: вы также можете создать компонент более высокого порядка, чтобы закрыть клавиатуру.

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)

Просто используйте это как это

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

ПРИМЕЧАНИЕ: accessible={false} требуется, чтобы форма ввода продолжала быть доступной через VoiceOver. Слабовидящие люди будут вам благодарны!

Pavle Lekic
9 декабря 2016 в 09:04
34

Это здорово, единственный комментарий, который у меня есть, это то, что вы могли использовать официальный API клавиатуры в RN и вызвать Keyboard.dismiss () вместо вызова некоторой внутренней утилиты RN dismissKeyboard (). Но в настоящее время оба работают нормально.

Eric Kim
23 марта 2017 в 00:37
1

@PavleLekic Извините за задержку, я обновил ответ вместе с методом HOC

jwinn
26 сентября 2017 в 20:47
3

Это прекрасно работает. Мне пришлось немного изменить синтаксис для определения функции стрелки, чтобы удалить неожиданную ошибку токена в RN: const DismissKeyboardHOC = (Comp) => {

Bradley
1 ноября 2017 в 20:30
2

Я не могу заставить onPress для TouchableWithoutFeedback сработать, что бы я ни пытался

Bradley
1 ноября 2017 в 21:31
0

Оказывается, мой компонент TouchableWithoutFeedback просто обертывал мой ввод и, следовательно, не запускался, потому что я не мог по нему щелкнуть (нажатие на TextInput отменяет TouchableWithoutFeedback 'onPress' - имеет смысл). Пришлось уменьшить масштаб и обернуть родительский компонент.

marco.marinangeli
2 декабря 2017 в 11:18
0

Я использовал это решение, но потом обнаружил проблемы с доступностью. Голос не будет работать внутри элемента TouchableWithoutFeedback. Кто-нибудь с такой же проблемой нашел решение? РЕДАКТИРОВАТЬ: решение заключалось в том, чтобы просто установить для элемента "available = {false}"!

Jun711
21 января 2018 в 02:42
0

<TouchableWithoutFeedback onPress = {this.press}> <View> <Text style = {{fontSize: 20}}> test </Text> </View> </TouchableWithoutFeedback> Кажется, он работает с текстом, но когда у меня есть TextInput , касание не перехватывается onPress TouchableWithoutFeedback. Есть идеи, как заставить его работать?

Jun711
21 января 2018 в 03:16
0

Моя ошибка. Событие onPress было захвачено другими кнопками в родительском контейнере. Но он работает, если в родительском компоненте нет другого компонента для захвата события касания.

James Trickey
21 февраля 2018 в 01:58
0

Это решение, которое я использовал, и я думал, что оно сработало. Одно из моих представлений содержит ListView, и, к сожалению, кажется, что свайпы не проходят через элемент TouchableWithoutFeedback. кто-нибудь еще сталкивался с этим? Спасибо

Harikrishnan
28 февраля 2018 в 08:44
0

Это решение также будет работать для ввода текста внутри List.

Hobbyist
15 апреля 2018 в 14:34
1

Это решение работает, но имейте в виду, что вы не можете использовать жесты смахивания в дочерних элементах компонента Touchable.

Anthony De Smet
10 февраля 2019 в 20:46
0

Если вам действительно нужен View, а не поведение ScrollView, полезно добавить bounces = {false} в качестве свойства ScrollView. В противном случае вы получите эластичную прокрутку на iOS.

Johncy
27 мая 2019 в 14:12
0

Клавиатуру нельзя отключить после использования. Предупреждение! TextInput имеет bluronSubmit={false}. Сделайте поле сфокусированным и покажите некоторую тревогу. После нажатия ОК в предупреждении, когда я пытаюсь отключить клавиатуру, нажатие вне TextInput не работает!

King Friday
28 июля 2019 в 18:28
0

Я не буду отрицать это, но, пожалуйста, удалите его или измените как неправильный и вводящий в заблуждение. См. Ответы «onStartShouldSetResponder в родительском представлении» как правильное поведение с меньшими усилиями.

Dimitri Kopriwa
26 апреля 2020 в 15:52
1

Зачем создавать HoC и просто добавлять его в корень вашего дерева приложений /

hakkikonu
16 декабря 2020 в 21:37
0

keyboardShouldPersistTaps='handled '- это волшебство.

Jarrett
21 января 2021 в 11:47
0

Хорошо, моя ошибка заключалась в том, что я позвонил на Keyboard.dimiss вместо Keyboard.dismiss()

Julian
31 марта 2021 в 23:09
0

Это замечательно - для веб-реакции я сделал это и собирался попробовать этот подход coderhelper.com/questions/56804790/…. немного повозившись с портированием RN, я чувствую, что это может сработать для подтверждения концепции, но до тех пор этот HOC работал отлично! Благодарность

Lydia
28 ноября 2021 в 02:27
0

Привет всем, кто-нибудь может мне помочь? <TouchableWithoutFeedback onPress = {Keyboard.dismiss} available = {false}> нарушает мой ввод в веб-версии, я не могу ничего писать внутри ввода. Есть какие-нибудь идеи исправить это?

Somnath Kadam
6 декабря 2021 в 17:42
0

не работает, если пользователь переходит с предыдущего экрана, который открывает клавиатуру для ввода текста, с реактивной навигацией v6

avatar
Rajesh Nasit
25 ноября 2021 в 05:53
0

Свойство onStartShouldSetResponder останавливает распространение события касания к элементу TouchableWithoutFeedback.

<TouchableWithoutFeedback onPress={...}>
  <View>
    <ScrollView>
      <View onStartShouldSetResponder={() => true}>
        // Scrollable content
      </View>
    </ScrollView>
  </View>
</TouchableWithoutFeedback>
avatar
Puneet Kansal
1 октября 2021 в 08:52
3

Используйте Keyboard.dismiss (), чтобы закрыть клавиатуру в любое время.

avatar
Sid009
29 октября 2020 в 07:47
0

Для скрытия клавиатуры Keyboard.dismiss () внутри TextInput.

avatar
Mash
20 октября 2020 в 09:54
3

Мы можем использовать клавиатуру и переключение без обратной связи из react-native

const DismissKeyboard = ({ children }) => (
  <TouchableWithoutFeedback
    onPress={() => Keyboard.dismiss()}
  >
    {children}
  </TouchableWithoutFeedback>
);

И используйте его так:

const App = () => (
  <DismissKeyboard>
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="username"
        keyboardType="numeric"
      />
      <TextInput
        style={styles.input}
        placeholder="password"
      />
    </View>
  </DismissKeyboard>
);

Я также объяснил здесь с исходным кодом.

avatar
Biplov Kumar
9 октября 2020 в 05:47
0

Ниже приведены два типа скрытой клавиатуры.

Тип: 1 если вы не используете режим прокрутки, просто импортируйте клавиатуру и добавьте Keyboard.dismiss(). это правильный способ реализации.

Тип: 2 если вы используете режим прокрутки, просто

<ScrollView contentContainerStyle={{flex: 1}} keyboardShouldPersistTaps='handled'>
  <TextInput />
</ScrollView>

это правильный способ реализации.

avatar
jyotishman saikia
20 сентября 2020 в 19:10
1

импортировать {Keyboard} из 'react-native';

используйте Keyboard.dismiss(), чтобы скрыть клавиатуру в любом событии onClick или onPress.

avatar
TripleM
6 июля 2020 в 10:46
15

Самый простой способ сделать это

import {Keyboard} from 'react-native'

, а затем используйте функцию Keyboard.dismiss()

Вот и все.

Вот скриншот моего кода, чтобы вы могли понять его быстрее.

Import Keyboard from react native. Also import TouchableWithoutFeedback

Теперь оберните все представление с помощью TouchableWithoutFeedback, а функция onPress будет keyboard.dismiss()

Вот пример TouchableWithoutFeedback and Keyboard.dismiss()

Таким образом, если пользователь коснется любого места экрана, за исключением поля textInput, клавиатура будет закрыта.

avatar
Cyrus Zei
6 февраля 2020 в 14:12
1

использовать этот пакет react-native-keyboard-aware-scroll-view

используйте этот компонент в качестве корневого компонента

, поскольку этот пакет react-native-keyboard-aware-scroll-view также имеет scrollView, вам нужно добавить к нему следующее:

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

avatar
Arthur Mastropietro
19 ноября 2019 в 22:28
8

Оберните весь компонент следующим образом:

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

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

У меня работал

avatar
Idan
12 августа 2019 в 15:15
16

Есть несколько способов, если вы контролируете событие типа onPress, вы можете использовать:

import { Keyboard } from 'react-native'

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

, если вы хотите закрыть клавиатуру при использовании прокрутки:

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

Дополнительная опция - когда пользователь нажимает вне клавиатуры:

<KeyboardAvoidingView behavior='padding' style={{ flex: 1}}>
    //inputs and other content
</KeyboardAvoidingView>
Link
1 ноября 2019 в 10:56
1

Ребята, вопрос актуален, но ему уже 4 года (конец 2019 года сейчас). RN теперь настолько прост и удобен в использовании. Мы должны пересмотреть все возможности, с помощью которых мы сможем решить этот вопрос. Позвольте проголосовать за этот комментарий!

avatar
Artem Shevtsov
7 августа 2019 в 17:02
1

Вот мое решение для отключения клавиатуры и прокрутки до нажатого TextInput (я использую ScrollView с опорой 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;

использование:

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

avatar
abhinandan sharma
11 апреля 2019 в 17:08
6

Модуль клавиатуры используется для управления событиями клавиатуры.

  • import { Keyboard } from 'react-native'
  • Добавьте ниже код в метод рендеринга.

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

Вы можете использовать -

Keyboard.dismiss()

static dismiss () Отключает активную клавиатуру и удаляет фокус в соответствии с собственными документами React.

avatar
Sarmad Shah
15 декабря 2018 в 18:07
2

Есть много способов справиться с этим, ответы выше не включают returnType, поскольку в то время он не был включен в react-native.

1: Вы можете решить эту проблему, заключив компоненты в ScrollView, по умолчанию ScrollView закрывает клавиатуру, если мы куда-то нажимаем. Но если вы хотите использовать ScrollView, но отключите этот эффект. вы можете использовать свойство pointerEvent для scrollView pointerEvents = 'none'.

2: Если вы хотите закрыть клавиатуру нажатием кнопки, вы можете просто использовать Keyboard из react-native

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

3: Вы также можете закрыть клавиатуру, нажав клавишу возврата на клавиатуре, ПРИМЕЧАНИЕ: если ваш тип клавиатуры числовой, у вас не будет клавиши возврата. Итак, вы можете включить его, задав ему свойство returnKeyType равным done. или вы можете использовать onSubmitEditing={Keyboard.dismiss}, он вызывается всякий раз, когда мы нажимаем клавишу возврата. А если вы хотите отключить клавиатуру при потере фокуса, вы можете использовать onBlur prop, onBlur = {Keyboard.dismiss}

avatar
Nagendra kr.
12 октября 2018 в 14:20
3

Первая импортная клавиатура

import { Keyboard } from 'react-native'

Затем внутри вашего TextInput вы добавляете Keyboard.dismiss ​​в свойство onSubmitEditing. У вас должно получиться что-то вроде этого:

render(){
  return(
    <View>
      <TextInput 
        onSubmitEditing={Keyboard.dismiss}
       />
    </View>
  )  
}
colidyre
12 октября 2018 в 14:44
1

Было бы неплохо больше контекста.

avatar
Scottmas
13 апреля 2018 в 21:14
19

Заключение компонентов в TouchableWithoutFeedback может вызвать странное поведение прокрутки и другие проблемы. Я предпочитаю заключать мое самое верхнее приложение в View с заполненным свойством onStartShouldSetResponder. Это позволит мне обрабатывать все необработанные прикосновения, а затем отключать клавиатуру. Важно отметить, что, поскольку функция-обработчик возвращает false, событие касания распространяется как обычно.

 handleUnhandledTouches(){
   Keyboard.dismiss
   return false;
 }

 render(){
    <View style={{ flex: 1 }} onStartShouldSetResponder={this.handleUnhandledTouches}>
       <MyApp>
    </View>
  }
kuhr
17 марта 2020 в 10:53
1

Спасибо за ответ @Scottmas. В итоге я использовал его вместо TouchableWithoutFeedback из-за вашего комментария «странное поведение прокрутки и другие проблемы». Но если я не слепо доверял вашим словам, не могли бы вы уточнить свой комментарий? :)

avatar
Bruce Xinda Lin
26 марта 2018 в 22:52
1

Keyboard.dismiss() сделает это. Но иногда он может потерять фокус, и клавиатура не сможет найти исх. Самый последовательный способ сделать это - поместить ref=_ref в textInput и сделать _ref.blur(), когда вам нужно уволить, и _ref.focus(), когда вам нужно вернуть клавиатуру.

avatar
gamingumar
31 декабря 2017 в 12:05
2

в ScrollView используйте

keyboardShouldPersistTaps="handled" 

Это выполнит вашу работу.

Anuj
20 августа 2020 в 08:21
0

Что делать, если я хочу ограничить клавиатуру (не хочу закрывать) клавиатуру для события?

avatar
Alireza
17 июня 2017 в 07:47
36

Вы можете импортировать keyboard из react-native , как показано ниже:

import { Keyboard } from 'react-native';

и в вашем коде может быть что-то вроде этого:

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

статическое отклонение ()

Отключает активную клавиатуру и убирает фокус.

SherylHohman
30 апреля 2018 в 07:49
0

static dismiss() мне не понадобилось. Я только что добавил Keyboard.dismiss() в свой метод onSubmit (где onSubmitEditing={() => {this.onSubmit()}})

avatar
Krishnendu Bhattacharyya
23 мая 2017 в 09:45
5

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

Используйте

Keyboard.dismiss(0);

, чтобы скрыть клавиатуру.

avatar
Samuel
1 мая 2017 в 16:45
3

Используя keyboardShouldPersistTaps в ScrollView, вы можете передать "обработано", которое касается проблем, которые, как говорят, возникают при использовании ScrollView. Вот что говорится в документации об использовании 'handled': the keyboard will not dismiss automatically when the tap was handled by a children, (or captured by an ancestor). Здесь - это место, где на него ссылаются.

Nick Grealy
13 января 2018 в 12:20
0

Это сработало для меня! (однако мне пришлось добавить его в свою стороннюю библиотеку react-native-keyboard-aware-scroll-view).

avatar
austin reynolds
30 января 2017 в 13:33
15

Если кому-то нужен рабочий пример того, как отключить многострочный ввод текста, вот и все! Надеюсь, это поможет некоторым людям, в документации вообще не описан способ отклонения многострочного ввода, по крайней мере, не было конкретной ссылки о том, как это сделать. Все еще нуб, который на самом деле публикует здесь в стеке, если кто-то думает, что это должна быть ссылка на фактическое сообщение, для которого был написан этот фрагмент, дайте мне знать.

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>
    )
  }
}
Anuj
20 августа 2020 в 08:21
0

Что делать, если я хочу ограничить клавиатуру (не хочу закрывать) клавиатуру для события?

avatar
Anshul Koka
12 января 2017 в 21:24
13

Обновлено использование ScrollView для React Native 0.39

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

Хотя проблема с двумя блоками TextInput все еще существует. например. Форма имени пользователя и пароля теперь отключает клавиатуру при переключении между входами. Хотелось бы получить несколько предложений по сохранению клавиатуры при переключении между TextInputs при использовании ScrollView.

Anshul Koka
12 января 2017 в 22:32
3

Похоже, что 0.40 обновляет keyboardShouldPersistTaps с boolean до enum с возможным значением 'handled`, которое, как предполагается, исправит это.

avatar
Adeel Imran
7 октября 2016 в 12:30
12
const dismissKeyboard = require('dismissKeyboard');
dismissKeyboard(); //dismisses it

Подход №2;

Спасибо пользователю @ ricardo-stuven за указание на это, есть еще один лучший способ отключить клавиатуру, который вы можете увидеть в примере в документации по реакции.

Простой импорт Keyboard и вызов его метода dismiss()

Ricardo Stuven
20 апреля 2018 в 20:35
1

Это точный эквивалент Keyboard.dismiss, который предпочтительнее, поскольку задокументирован. github.com/facebook/react-native/blob/…

Adeel Imran
21 апреля 2018 в 21:21
0

На тот момент, когда я дал этот ответ, это не было задокументировано. Спасибо, что упомянули об этом. Я обновлю свой ответ.

avatar
Gant Laborde
29 сентября 2016 в 13:50
336

Это только что было обновлено и задокументировано! Больше никаких скрытых уловок.

import { Keyboard } from 'react-native'

// Hide that keyboard!
Keyboard.dismiss()

Ссылка Github

sheepdog
2 января 2017 в 03:07
5

Спасибо, что добавили это. Надеюсь, ваш ответ всплывет наверху. Чуть не пропустил и использовал устаревшее решение.

jehna1
10 января 2017 в 13:54
2

Pinging @MrMuetze, чтобы изменить это как правильный ответ

jskidd3
6 ноября 2018 в 12:06
17

Это не должно быть лучшим ответом. Вопрос спрашивает, как убрать клавиатуру при тапе за ее пределами. Этот ответ просто предоставляет API для этого, в то время как лучший ответ обеспечивает работоспособную реализацию.

Alejandro Gonzalez
7 января 2020 в 13:49
0

вы можете использовать следующую библиотеку: KeyboardAwareScrollView

Ashad Nasim
19 июля 2020 в 09:28
0

@ jehna1 это неправильный ответ согласно вопросу

Anuj
20 августа 2020 в 08:20
0

Что делать, если я хочу ограничить клавиатуру (не хочу закрывать) клавиатуру

OwlOCR
25 сентября 2020 в 20:01
0

Спасибо, это здорово.

anthony_718
26 сентября 2021 в 15:55
0

хорошее решение здесь

avatar
Joshua Pinter
30 апреля 2016 в 18:46
99

Используйте React Native Keyboard.dismiss()

Обновленный ответ

React Native предоставил статический метод dismiss() для Keyboard, поэтому обновленный метод:

import { Keyboard } from 'react-native'; 

Keyboard.dismiss()

Оригинальный ответ

Используйте dismissKeyboard React Native.

У меня была очень похожая проблема, и я чувствовал себя единственным, кто ее не понял.

ScrollViews

Если у вас есть ScrollView или что-то, что унаследовано от него, например, ListView, вы можете добавить опору, которая автоматически отключает клавиатуру на основе событий нажатия или перетаскивания.

Свойство: keyboardDismissMode и может иметь значение none, interactive или on-drag. Подробнее об этом можно прочитать здесь.

Обычные просмотры

Если у вас есть что-то, кроме ScrollView, и вы хотите, чтобы какие-либо нажатия отключили клавиатуру, вы можете использовать простой TouchableWithoutFeedback и onPress использовать библиотеку утилит React Native dismissKeyboard , чтобы убрать клавиатуру за вас.

В вашем примере вы можете сделать что-то вроде этого:

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>

Примечание: TouchableWithoutFeedback может иметь только одного дочернего элемента, поэтому вам нужно обернуть все, что ниже, в один View, как показано выше.

Joshua Pinter
21 февраля 2017 в 19:25
4

React Native предоставил статический метод dismiss() на клавиатуре, поэтому обновленный метод: import { Keyboard } from 'react-native'; Keyboard.dismiss().

pstanton
16 июня 2018 в 00:36
1

у меня есть клавиатура, которая болтается, так как я перезагрузил, сосредоточившись на поле ввода. в этом случае Keyboard.dismiss() ничего не делает, так как его реализация зависит от того, чтобы сосредоточиться на вводе, чего я больше не являюсь.

Joshua Pinter
17 июня 2018 в 00:44
0

@pstanton Тогда что вам нужно было сделать, чтобы отключить клавиатуру?

pstanton
17 июня 2018 в 22:52
0

Я никак не мог найти способ, поэтому я закрылся силой!

Anuj
20 августа 2020 в 08:20
0

Что делать, если я хочу ограничить клавиатуру (не хочу закрывать) клавиатуру

avatar
syarul
6 ноября 2015 в 06:36
101

используйте это для пользовательского увольнения

var dismissKeyboard = require('dismissKeyboard');

var TestView = React.createClass({
    render: function(){
        return (
            <TouchableWithoutFeedback 
                onPress={dismissKeyboard}>
                <View />
            </TouchableWithoutFeedback>
        )
    }
})
syarul
30 апреля 2016 в 04:15
0

Это не задокументировано, но образцы в репозитории на github, работающем с реакцией, действительно используют его несколько раз.

Joshua Pinter
30 апреля 2016 в 18:16
7

Интересно, что для тех, кому интересно, откуда это взялось, это служебная библиотека в React Native. Вот источник: github.com/facebook/react-native/blob/master/Libraries/…

Peter G.
13 июля 2016 в 09:36
1

По какой-то причине это не сработало, когда я попробовал с react-native-search-bar

Ricardo Stuven
20 апреля 2018 в 20:33
0

Это точный эквивалент Keyboard.dismiss, который предпочтительнее, поскольку задокументирован. github.com/facebook/react-native/blob/…

avatar
hunteros
11 августа 2015 в 00:58
33

Я новичок в React и столкнулся с той же проблемой при создании демонстрационного приложения. Если вы используете опору onStartShouldSetResponder (описанную здесь), вы можете прикоснуться к простому старому React.View. Любопытно услышать мысли более опытных реакторов об этой стратегии / если есть лучшая стратегия, но это то, что сработало для меня:

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

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

Здесь нужно отметить 2 вещи. Во-первых, как обсуждалось здесь, пока нет способа завершить редактирование всех вложенных представлений, поэтому мы должны напрямую обратиться к TextInput, чтобы размыть его. Во-вторых, onStartShouldSetResponder перехватывается другими сенсорными элементами управления поверх него. Таким образом, нажатие на TouchableHighlight и т. Д. (Включая другой TextInput) в представлении контейнера вызовет событие , а не . Однако нажатие на Image в представлении контейнера все равно отключит клавиатуру.

mutp
22 августа 2015 в 09:35
0

Это определенно работает. Но, как вы сказали, мне тоже любопытно, правильный ли это путь. Надеюсь, они скоро решат эту проблему (github.com/facebook/react-native/issues/113)

James Trickey
21 февраля 2018 в 02:10
0

Отлично, это сработало для меня. Моя прокрутка не работала с сенсорными методами! Спасибо!

avatar
Tyler McGinnis
19 июля 2015 в 17:44
28

Используйте ScrollView вместо View и установите для атрибута keyboardShouldPersistTaps значение false.

<ScrollView style={styles.container} keyboardShouldPersistTaps={false}>
    <TextInput
        placeholder="Post Title"
        onChange={(event) => this.updateTitle(event.nativeEvent.text)}
        style={styles.default}/>
 </ScrollView>
TurboFish
20 июля 2015 в 12:46
0

Согласно документации, атрибут keyboardShouldPersistTaps по умолчанию имеет значение false при использовании ScrollView. Я только что обновил свой собственный response-native до последней версии, и проблема с переключением на второй TextInput все еще сохраняется. Клавиатура тогда не уходит. Вы нашли решение этой конкретной проблемы?

Ryan McDermott
9 октября 2015 в 16:24
1

Документы были неправильными, но теперь были обновлены, см. Этот PR: github.com/facebook/react-native/issues/2150

Lane Rettig
4 февраля 2016 в 22:24
0

Что делает keyboardShouldPersistTaps? Почему это актуально здесь? Спасибо

Milan Rakos
4 апреля 2018 в 08:05
1

Предупреждение: keyboardShouldPersistTaps = {false} устарел. Вместо этого используйте keyboardShouldPersistTaps = "never" '

avatar
Jonathan Huang
12 мая 2015 в 04:39
10

Я только что протестировал это с помощью последней версии React Native (0.4.2), и клавиатура отключается при нажатии в другом месте.

И FYI: вы можете настроить функцию обратного вызова, которая будет выполняться, когда вы закрываете клавиатуру, назначив ее для свойства «onEndEditing».

TurboFish
12 мая 2015 в 21:36
0

Я отлаживал обратный вызов onEndEditing, но раньше он никогда не запускался; Я собираюсь изучить это с помощью более новой версии react native, спасибо за ваше предложение

avatar
christopherdro
6 мая 2015 в 17:59
8

Если я не ошибаюсь, последняя версия React Native решила эту проблему, заключающуюся в возможности закрыть клавиатуру, нажав на нее.

Okazaki Miyama Yuta
7 мая 2015 в 15:54
4

Не могли бы вы указать, какая часть их кода / документации делает это? У меня та же проблема, и я очень ценю, что она указала мне направление :)

Lane Rettig
4 февраля 2016 в 22:54
0

Подтверждено, что это все еще проблема с RN 0.19 (последняя).

hippofluff
19 августа 2016 в 13:49
0

По-прежнему проблема с RN 0.28

avatar
boredgames
1 мая 2015 в 03:19
8

Как насчет размещения сенсорного компонента вокруг / рядом с 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>
        )
    }
}
avatar
TurboFish
21 апреля 2015 в 12:04
43

Простой ответ - использовать ScrollView вместо View и установить для свойства scrollable значение false (хотя может потребоваться корректировка стиля).

Таким образом, клавиатура отключается, когда я нажимаю где-нибудь еще. Это может быть проблема с react-native, но события касания, похоже, обрабатываются только с помощью ScrollViews, что приводит к описанному поведению.

Редактировать: Спасибо jllodra. Обратите внимание, что если вы коснетесь непосредственно другого Textinput, а затем за его пределами, клавиатура все равно не скроется.

Piyush Chauhan
10 июня 2015 в 07:45
1

Он работает с просмотром прокрутки, но все же есть некоторые случаи, когда я могу нажать кнопку, чтобы изменить вид с помощью навигатора, а клавиатура по-прежнему залипает внизу, и мне нужно вручную нажать клавишу возврата, чтобы закрыть ее :(

jllodra
17 июня 2015 в 19:28
1

Клавиатура скрывается, когда вы нажимаете за пределами TextInput, но если (вместо нажатия снаружи) вы нажимаете на другой TextInput и, наконец, нажимаете снаружи, клавиатура не скрывается. Проверено на 0.6.0.

Lane Rettig
4 февраля 2016 в 22:22
0

Сейчас я наблюдаю другое поведение. Нажатие за пределами TextInput скрывает клавиатуру, даже если я нажимаю непосредственно на другой TextInput - что является проблемой, потому что вам нужно дважды нажать на другой TextInput, чтобы иметь возможность вводить его! Вздох. (с РН 0,19)

Eric Wiener
16 августа 2018 в 22:06
1

Вы можете установить для scrollable значение true и использовать keyboardShouldPersistTaps = {'handled'} и keyboardDismissMode = {'on-drag'} для достижения того же эффекта.

Yvon Huynh
15 апреля 2020 в 07:02
0

у меня работал только scrollview, я не знаю почему, принятый ответ, когда я ввожу цифровую клавиатуру, отклоняется