Скрыть клавиатуру в режиме реагирования

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

Этот базовый пример по-прежнему не работает для меня с реактивным 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>

Ответ 1

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

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

Правильный способ заключается в инкапсуляции View с TouchableWithoutFeedback и вызове Keyboard.dismiss()

EDIT: теперь вы можете использовать ScrollView с keyboardShouldPersistTaps='handled' чтобы только отменить клавиатуру, когда кран не обрабатывается ScrollView (например, нажатие на другие текстовые входы или кнопки)

Если у вас есть

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

EDIT: вы также можете создать компонент более высокого порядка, чтобы закрыть клавиатуру.

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. Люди с ослабленным зрением будут благодарны вам!

Ответ 2

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

import { Keyboard } from 'react-native'

// Hide that keyboard!
Keyboard.dismiss()

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

Ответ 3

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

var dismissKeyboard = require('dismissKeyboard');

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

Ответ 4

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

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

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

import { Keyboard } from 'react-native'; 

Keyboard.dismiss()

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

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

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

ScrollViews

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

Подставка является keyboardDismissMode диском и может иметь значение none, interactive или on-drag. Вы можете прочитать больше об этом здесь.

Регулярные виды

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

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

var DismissKeyboard = require('dismissKeyboard'); // Require React Native 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 как показано выше.

Ответ 5

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

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

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

Ответ 6

Я новичок в React, и столкнулся с той же проблемой при создании демонстрационного приложения. Если вы используете реквизит onStartShouldSetResponder (описанный здесь), вы можете получить прикосновения к React.View старому 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 в представлении контейнера все равно приведет к отключению клавиатуры.

Ответ 7

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

import { Keyboard } from 'react-native';

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

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

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

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

Ответ 8

Используйте 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>

Ответ 9

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

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

Ответ 10

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

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

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

Ответ 11

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

Подход № 2;

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

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

Ответ 12

Как насчет размещения сенсорного компонента вокруг/рядом с 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>
        )
    }
}

Ответ 13

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

Ответ 14

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

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

Ответ 15

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

 handleUnhandledTouches(){
   Keyboard.dismiss
   return false;
 }

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

Ответ 16

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

Используйте

Keyboard.dismiss(0);

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

Ответ 17

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

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

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

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

Keyboard.dismiss()

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

Ответ 18

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

import { Keyboard } from 'react-native'

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

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

Ответ 19

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

Ответ 20

import { Keyboard } from 'react-native';
Keyboard.dismiss();`

или

onSubmitEditing={Keyboard.dismiss}

Ответ 21

в использовании ScrollView

keyboardShouldPersistTaps="handled"

Это сделает вашу работу.

Ответ 22

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

1: Вы можете решить эту проблему, обернув свои компоненты внутри ScrollView, по умолчанию ScrollView закрывает клавиатуру, если мы что-то нажимаем. Но если вы хотите использовать ScrollView, но отключите этот эффект. Вы можете использовать pointerEvent prop для 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 to done. или вы можете использовать onSubmitEditing={Keyboard.dismiss}, он onSubmitEditing={Keyboard.dismiss} всякий раз, когда мы нажимаем клавишу возврата. И если вы хотите отклонить клавиатуру при потере фокуса, вы можете использовать onBlur prop, onBlur = {Keyboard.dismiss}

Ответ 23

Есть несколько способов, если вы управляете таким событием, как 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>

Ответ 24

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

Замена View на ScrollView не является правильным решением, как если бы у вас было несколько текстовых входов или кнопок; нажимая на них, пока клавиатура вверх, будет только отбрасывать клавиатуру.

Правильный способ заключается в инкапсуляции View с помощью TouchableWithoutFeedback и вызова. Здесь KeyBoard - класс react-native.

Функция

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

Ответ 25

импортировать "клавиатуру" из реакции-native в ваш компонент

запустить keyboard.dismiss(); для скрытия клавиатуры

Ответ 26

Использовать модуль клавиатуры

import { Keyboard } from 'react-native';

Keyboard.dismiss(); 

(or)

onSubmitEditing={Keyboard.dismiss}

Ответ 27

сделайте это - он скроет мягкую клавиатуру.

Step1 импортируйте клавиатуру внутри вашего .js файла.

import {Keyboard} из 'response-native';

Step2 и где бы вы ни скрывали клавиатуру, просто используйте эту строку ниже.

Keyboard.dismiss();

Ответ 28

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

Ответ 29

попробуйте keyboard.dismiss(). У меня сработало

Ответ 30

Вот мое решение для отклонения клавиатуры и прокрутки к нажатой TextInput (я использую ScrollView с пропуском клавиатурыDismissMode):

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