Сховати клавіатуру у реальній реакції

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

Цей основний приклад досі не працює для мене з натисненням реакції 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>

Проблема з відхиленням клавіатури стає ще серйознішою, якщо у вас є keyboardType='numeric', оскільки немає можливості її звільнити.

Заміна перегляду на ScrollView не є правильним рішенням, так як якщо у вас є декілька textInputs або buttons, натискання на них під час роботи клавіатури відхиляє лише клавіатуру.

Правильний спосіб - це інкапсуляція Перегляду TouchableWithoutFeedbackта викликKeyboard.dismiss()

EDIT: Тепер ви можете використовувати ScrollViewз keyboardShouldPersistTaps='handled'тільки закрити клавіатуру , коли кран не обробляються дітьми (тобто натиснувши на інших textInputs або кнопках.)

Якщо у вас є

<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. Люди з вадами зору будуть вам вдячні!

Це лише оновлено та задокументовано ! Більше немає прихованих хитрощів.

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

Використовуйте реактивні Native's 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як показано вище.

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

Таким чином, клавіатура звільняється в той момент, коли я натискаю десь ще. Це може бути проблемою з нативними реакціями, але, здається, події з натисканням обробляються лише за допомогою ScrollViews, що призводить до описаної поведінки.

Редагувати: Завдяки jllodra. Зауважте, що якщо натиснути безпосередньо на інший Textinput, а потім зовні, клавіатура все одно не буде ховатися.

Ви можете імпортувати keyboard з рідних реакцій, як нижче:

import { Keyboard } from 'react-native';

і у вашому коді може бути щось подібне:

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

статичне відхилення ()

Відхиляє активну клавіатуру та знімає фокус.

Я абсолютно новий в 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>

Якщо комусь потрібен робочий приклад того, як відхилити багаторядковий ввід тексту, ось вам! Сподіваюсь, це допомагає деяким людям там, документи взагалі не описують спосіб відхилити багаторядковий вхід, принаймні не було конкретної посилання на те, як це зробити. І все-таки 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.

Якщо ви керуєте подією, якою 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>

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

Підхід №2;

Завдяки користувачеві @ ricardo-stuven за вказівку на це, є ще один кращий спосіб відхилити клавіатуру, яку ви можете побачити на прикладі в реагуючих нативних документах.

Простий імпорт Keyboardта виклик - це методdismiss()

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

 handleUnhandledTouches(){
   Keyboard.dismiss
   return false;
 }

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

Я щойно перевірив це, використовуючи останню версію 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>
        )
    }
}

Оберніть весь ваш компонент:

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

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

Працювали для мене

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

Використовуйте

Keyboard.dismiss(0);

щоб приховати клавіатуру.

Модуль клавіатури використовується для управління подіями клавіатури.

• import { Keyboard } from 'react-native'

• Додайте нижче код у методі візуалізації.

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

Ви можете використовувати -

Keyboard.dismiss()

static dismiss () Відхиляє активну клавіатуру та видаляє фокус відповідно до реалізованих нативних документів.

Перша імпортна клавіатура

import { Keyboard } from 'react-native'

Потім всередині вашого TextInputдодати Keyboard.dismissв onSubmitEditingопору. У вас повинно бути щось таке:

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

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

у ScrollViewкористуванні

keyboardShouldPersistTaps="handled" 

Це зробить вашу роботу.

Існує багато способів впоратися з цим, відповіді вище не містять, returnTypeоскільки він не був включений до того часу, коли він реагував.

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 useKeyboard.dismiss () '.

3: Ви також можете закрити клавіатуру, натискаючи клавішу повернення на клавіатурі, ПРИМІТКА. Якщо тип вашої клавіатури чисельний, у вас не буде ключа повернення. Отже, ви можете ввімкнути це, надавши йому опору, returnKeyType done. або ви можете скористатися. onSubmitEditing={Keyboard.dismiss}Він дзвонить, коли ми натискаємо клавішу повернення І якщо ви хочете відхилити клавіатуру, втрачаючи фокус, ви можете використовувати опору onBlur,onBlur = {Keyboard.dismiss}

Keyboard.dismiss()зробимо це. Але іноді це може втратити фокус, і клавіатура не зможе знайти посилання. Найбільш послідовний спосіб зробити це ввести ref=_reftextInput і робити, _ref.blur()коли вам потрібно відхилити, і _ref.focus()коли вам потрібно повернути клавіатуру.

випробувати keyboard.dismiss(). Це працювало для мене

Ось моє рішення щодо відхилення та прокрутки клавіатури до вибору 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>
   );
}

користуйтеся цим пакетом react-native-keyboard-aware-scroll-view

використовувати цей компонент як свій кореневий компонент

оскільки цей пакет react-native-keyboard-aware-scroll-viewтакож має scrollView, вам потрібно додати його до нього:

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