Как открыть клавиатуру автоматически в React Native?

У меня есть экран в приложении React Native, в котором у меня мало текстовых полей.

Мне было интересно, есть ли способ, при котором на экране загружается мое ключевое слово автоматически и фокусируется на моем первом поле ввода текста?

Я искал что-то вроде stateAlwaysVisible в android.

Ответы

Ответ 1

Клавиатура должна открываться автоматически при фокусировке <TextField/>. Вы можете использовать autoFocus чтобы фокусировать ее, когда элемент монтируется (ссылка)

Ответ 2

@Ziarno прав, но, Аппаратное обеспечение → Клавиатура → Переключить программную клавиатуру

Ответ 3

Выбранное решение не работает для меня из-за стековой навигации (см. Комментарий "SoundStage" для выбранного решения)

Я добавил новую переменную openTheKeyboard в состояние, изначально установленное в false.

Мое хакерское решение:

componentDidMount() {
  this.setState({ openTheKeyboard: true });
}

componentDidUpdate() {
  if (this.state.openTheKeyboard) {
    this.textInput.focus();
    this.setState({ openTheKeyboard: false });
  }
}

Ответ 4

Мой путь (возникла проблема с фокусировкой и отображением клавиатуры на компонентном рендере)

import { InteractionManager, TextInput } from 'react-native';

...

inputRef = React.createRef();

componentDidMount() {
  this.focusInputWithKeyboard()
}

focusInputWithKeyboard() {
  InteractionManager.runAfterInteractions(() => {
    this.inputRef.current.focus()
  });
}

render() {
  <TextInput ref={this.inputRef} />
}

Ответ 5

Кажется, это работает в моем симуляторе. Не подтверждено на реальном устройстве.

constructor(props) {
  super(props);
  this.buildNameTextInput = React.createRef();
}

<TouchableOpacity
  style={styles.mainButton}
  onPress={() => {
    this.buildNameTextInput = true
    this.props.setSaveBuildModal(true)
  }}
>
  <Text style={styles.mainButtonText}> Save Build </Text>
</TouchableOpacity>

<TextInput
  autoFocus={!!this.buildNameTextInput}
  ref={this.buildNameTextInput}
  placeholder="Type a Name"
  autoCapitalize="words"
  style={{...styles.heroBtnText, marginVertical: 50}}
  onChangeText={buildName => this.props.setCurrentBuildName(buildName)}
  value={this.props.buildName}
/>
  1. Мне нужен конструктор, чтобы зарегистрировать ссылку
  2. Обработчик устанавливает для локальной переменной значение true
  3. Автофокус активирует поле для фокусировки. Клавиатура иногда открывается на симуляторе Android (это я не могу объяснить).
  4. ссылка для ссылки на элемент DOM