Отключение клавиатуры в React Native

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

Я знаю, что есть TouchableWithoutFeedback, в который я могу обернуть свой компонент, но как лучше всего это сделать для нескольких экранов, имеющих эту проблему.

Должен ли я создать для этого HOC, который обрабатывает TouchableWithoutFeedback??


react-native reactjs javascript keyboard touchableopacity
person another_CS_guy    schedule 04.08.2020    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Ты можешь сделать это

<KeyboardAvoidingView behavior="padding">
    <ScrollView keyboardShouldPersistTaps="handled">
    // Rest of your code
    </ScrollView
</KeyboardAvoidingView>
person mainak    schedule 05.08.2020

arrow_upward
0
arrow_downward

HOC - лучший подход имхо

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>
  );
};
export const DismissKeyboardView = DismissKeyboardHOC(View)
person johnob3    schedule 14.09.2020
comment
Это работает нормально, но проблема в моем случае заключается в том, что дети состоят из Flatlist, а Flatlist вообще не прокручивается, когда внутри TouchableWithoutfeedback. - person Aldor; 19.03.2021