Потерять фокус и отклонить клавиатуру при нажатии за пределами поля TextInput в React Native?

Я уже исследовал об этом и нашел этот пост:

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

Но это не сработало для меня. Когда я касаюсь части экрана, находящейся за пределами поля ввода текста, я ожидал, что поле ввода потеряет фокус и клавиатура исчезнет. Но ничего не происходит. Курсор продолжает мигать на вводе.

Ниже приведен код, который я пробовал. Обратите внимание, что я использую redux-form v6:

import dismissKeyboard from 'dismissKeyboard';

<TouchableWithoutFeedback onPress={()=> dismissKeyboard()}>
        <View style={styles.inputWrap}>
          <Field name="editLocation" component={TextField} />
          <Button onPress={handleSubmit(this.onSubmit)}>Sign In</Button>
        </View>
</TouchableWithoutFeedback>

Компонент TextField содержит TextInput. Не уверен, что я делаю что-то не так.

Я протестировал код на эмуляторе Genymotion с изображением Samsung S6 и на моем Samsung Note 4.


person rash.tay    schedule 15.09.2016    source источник
comment
Вы знаете, каковы размеры вашего TouchableWithoutFeedback ?   -  person rclai    schedule 15.09.2016
comment
Другими словами, знаете ли вы, вызывается ли ваш обратный вызов onPress?   -  person rclai    schedule 15.09.2016
comment
@rclai Идеально. Спасибо, что прокомментировали ваш запрос. Размер был настоящей проблемой. Спасибо.   -  person rash.tay    schedule 19.09.2016
comment
Без проблем. Если вы не возражаете, я разместил ответ, чтобы вы могли отметить его как правильный.   -  person rclai    schedule 19.09.2016
comment
@rclai Конечно. Без проблем.   -  person rash.tay    schedule 20.09.2016
comment
используйте прокрутку. Лучше использовать ScrollView и Keyboard.dismiss. Используя ScrollView, когда пользователь нажимает за пределами textInput, клавиатура закрывается. Этот ответ спас мой день   -  person an0o0nym    schedule 22.06.2021


Ответы (1)


Вам нужно проверить размеры вашего TouchableWithoutFeedback, чтобы убедиться, что ваш onPress вызывается.

person rclai    schedule 19.09.2016
comment
Не могли бы вы уточнить свой ответ немного подробнее? Как проверить размеры моего компонента? - person aviggiano; 29.06.2017
comment
Вы можете использовать инспектор переключения в меню реактивного отладчика или добавить backgroundColor, чтобы проверить его. - person Aayush Anand; 03.11.2018