Скрыть клавиатуру в реагирующем

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

import { Keyboard } from 'react-native'

// Hide that keyboard!
Keyboard.dismiss()

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

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

var dismissKeyboard = require('dismissKeyboard');

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

Используйте 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 как показано выше.

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

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

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

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

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

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

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

Вы можете импортировать keyboard из адаптивной, как показано ниже:

import { Keyboard } from 'react-native';

и в вашем коде сделать что-то вроде этого:

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

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

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

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

Если кому-то нужен рабочий пример того, как уволить многострочный ввод текста здесь, иди! Надеюсь, что это поможет некоторым людям, документы не описывают способ вообще отказаться от многострочного ввода, по крайней мере, не было конкретной ссылки на то, как это сделать. Тем не менее, 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>
    )
  }
}

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

Подход № 2;

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

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

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

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

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

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

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

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

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

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

 handleUnhandledTouches(){
   Keyboard.dismiss
   return false;
 }

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

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

Используйте

Keyboard.dismiss(0);

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

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

Есть много способов справиться с этим, ответы выше не включают 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}

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

import { Keyboard } from 'react-native'

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

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

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

keyboardShouldPersistTaps="handled" 

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

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

или

onSubmitEditing={Keyboard.dismiss}

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

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

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

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

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

Keyboard.dismiss();

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

import { Keyboard } from 'react-native';

Keyboard.dismiss(); 

(or)

onSubmitEditing={Keyboard.dismiss}

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

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

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

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

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

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