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

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

<TouchableWithoutFeedback onPress={...}>
  <View>
    <ScrollView>
      <View onStartShouldSetResponder={() => true}>
        // Scrollable content
      </View>
    </ScrollView>
  </View>
</TouchableWithoutFeedback>

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

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

Мы можем использовать клавиатуру и переключение без обратной связи из 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>
);

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

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

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

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

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

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

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

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

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

import {Keyboard} from 'react-native'

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

Вот и все.

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

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

Вот пример

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

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

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

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

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

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

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

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

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

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

Вот мое решение для отключения клавиатуры и прокрутки до нажатого 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>
   );
}

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

• import { Keyboard } from 'react-native'

• Добавьте ниже код в метод рендеринга.

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

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

Keyboard.dismiss()

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

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

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

import { Keyboard } from 'react-native'

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

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

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

 handleUnhandledTouches(){
   Keyboard.dismiss
   return false;
 }

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

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

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

keyboardShouldPersistTaps="handled" 

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

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

import { Keyboard } from 'react-native';

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

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

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

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

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

Используйте

Keyboard.dismiss(0);

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

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

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

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

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

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

import { Keyboard } from 'react-native'

// Hide that keyboard!
Keyboard.dismiss()

Ссылка Github

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

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

var dismissKeyboard = require('dismissKeyboard');

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

Я новичок в 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 в представлении контейнера все равно отключит клавиатуру.

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

Я только что протестировал это с помощью последней версии 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>
        )
    }
}

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

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

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