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

Это просто обновляется!--2-->и документально! Больше никаких скрытых трюков.

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 и вы хотели бы усилить, чтобы закрыть клавиатуру, вы можете использовать простой 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 как показано выше.

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

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

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

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

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

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

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

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

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

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

Подход № 2;

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

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

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

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

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

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

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

использовать

Keyboard.dismiss(0);

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

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

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

keyboardShouldPersistTaps="handled" 

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

обертывание компонентов в TouchableWithoutFeedback может вызвать некоторое странное поведение прокрутки и другие проблемы. Я предпочитаю обернуть мое самое верхнее приложение в View С onStartShouldSetResponder свойства заполнены. Это позволит мне обрабатывать все unhandledTouches (а затем уволить клавиатуру):

"'

 handleUnhandledTouches(){
   Keyboard.dismiss
   return false;
 }

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

"'

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