Блог

Главная - Вопросы по программированию - Как автоматически сфокусироваться на родной клавиатуре React Native?

Как автоматически сфокусироваться на родной клавиатуре React Native?

#react-native #react-native-navigation #autofocus

Вопрос:

У меня проблема с автофокусом для ввода текста в React Native. У меня есть два экрана, когда я нажимаю кнопку на экране A, она переходит на экран B, и у меня есть текстовый ввод на экране B. Я хочу, чтобы этот текстовый ввод автоматически фокусировался, когда я перейду на экран B

Это мой код, но он не работает, я вижу клавиатуру на секунду, и она исчезает.

 <TextInput
   placeholder="Search"
   style={styles.searchBar}
   autoFocus={true}
   value={text}
   onChangeText={changeText}
 />

Я думаю, что не работает автофокус со стеком навигации, и после того, как я попробовал с ref, но снова не смог добиться успеха.

 const inputRef = useRef(null);
const onFocusHandler = () => {
       inputRef.current.focus();
}
useEffect(() => {
       onFocusHandler();
}, []);

TextInput с ссылкой

 <TextInput
    placeholder="Search"
    style={styles.searchBar}
    ref={inputRef}
    value={text}
    onChangeText={changeText}
/>

Комментарии:

1. Попробуйте дать некоторый тайм-аут для onFocusHandler

2. Большое вам спасибо, это сработало! Но я не понял, почему он не работает, работает без тайм-аута ?

3. потому что в useEffect поле inputRef еще не назначено, или вы также должны использовать onLayout обратный вызов для установки фокуса

Метки: