Рассмотрим следующую ситуацию:
Есть страница с Input
и Button
для открытия модального окна.
В модальном есть другой Button
, чтобы закрыть этот модальный, чтобы сфокусировать Input
и показать Keyboard
.
Проблема:
Сразу после нажатия другой Button
, чтобы закрыть модальное окно, сфокусировать Input
и показать Keyboard
, происходит следующее:
- Модальное окно закрыто.
Input
имеет фокус.- Но
Keyboard
НЕ отображается.
Это мой код:
import React, { useState, useEffect, useRef } from 'react';
import { View } from 'react-native';
import { Button, Input, Overlay } from 'react-native-elements';
const App = () => {
const [isInputFocused, setInputFocused] = useState(false);
const [isModalVisible, setModalVisible] = useState(false);
const inputRef = useRef(null);
useEffect(() => {
isInputFocused ? inputRef.current.focus() : inputRef.current.blur();
}, [isInputFocused]);
const handleInputFocus = () => setInputFocused(true);
const handleInputBlur = () => setInputFocused(false);
const handleOpenModalButtonPress = () => setModalVisible(true);
const handleFocusInputButtonPress = () => {
setModalVisible(false);
setInputFocused(true);
};
const handleModalBackdropPress = () => setModalVisible(false);
return (
<View style={{ justifyContent: 'space-around', flex: 1, padding: 25 }}>
<Input
ref={inputRef}
onFocus={handleInputFocus}
onBlur={handleInputBlur}
/>
<Button
title="Open Modal"
onPress={handleOpenModalButtonPress}>
</Button>
<Overlay visible={isModalVisible} onBackdropPress={handleModalBackdropPress}>
<Button title="Focus Input and Open Keyboard" onPress={handleFocusInputButtonPress} />
</Overlay>
</View>
);
};
export default App;
Вы можете увидеть это вживую здесь.
Вопрос:
Можно ли открыть клавиатуру программно? Наверное, это решило бы мою проблему.
Если нет, может ли кто-нибудь объяснить, чего мне не хватает в моем текущем подходе, или предложить другое решение?
Заранее спасибо.
P.S.
Пакет
react-native-elements
используется здесь только в целях стилизации.Input
наследует всеTextInput
реквизиты,Overlay
-Modal
иButton
-TouchableWithoutFeedback
реквизиты.Так что, я полагаю, они должны вести себя почти так же, как случайные React Native
TextInput
,Modal
иTouchableWithoutFeedback
.В настоящее время я тестировал этот код только на Android.
ref
иfocus()
, как предлагается в этом ответе, но это не дает желаемого поведения. - person Marian13   schedule 11.04.2020setTimeout
для переносаsetInputFocused(true)
илиinputRef.current.focus()
, как вы предложили, но это тоже не помогает. - person Marian13   schedule 11.04.2020setTimeout(() => setInputFocused(true), 500);
помогло — вы тестируете на реальном устройстве? - person Marek Lisik   schedule 11.04.2020setTimeout(() => setInputFocused(true), 500);
работает только первый раз. Если вы попытаетесь нажатьOpen Modal
, а затем еще разFocus Input and Open Keyboard
, клавиатура не будет отображаться. - person Marian13   schedule 11.04.2020