Реагировать на родной TextInput Автофокус не работает

Question

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

Когда мы перемещаемся с экрана A на экране B, а затем переходит обратно из B-> A, тогда автофокус textinput не работает.

<TextInput
          style={styles.textInput}
          textStyle={styles.inputTextStyle}
          autoFocus={true}
          placeholder='Enter Code'
          keyboard={'numeric'}
          placeholderTextColor={AppStyles.color.grey}
          value={code}
          onChangeText={this.updateCode}
          underline={false}
        />

Answer 1

Это потому, что autofocus срабатывает в первый раз на componentDidMount. Чтобы вызвать его вручную после перехода назад от B к A, вы должны использовать withNavigationFocus HO C. Поэтому, когда пользователь фокусируется на экране A, вы можете использовать следующий код для отображения клавиатуры.

import React from 'react';
import { Text } from 'react-native';
import { withNavigationFocus } from 'react-navigation';

class FocusStateLabel extends React.Component {
   componentDidUpdate() {
       if(this.props.isFocused){
           this.inputField.focus();
       }
   }  
   render() {
     return (
       <TextInput
         ref={(input) => { this.inputField = input; }}
         placeholder = "inputField"
       />
     )
  }
}

// withNavigationFocus returns a component that wraps FocusStateLabel and passes
// in the navigation prop
export default withNavigationFocus(FocusStateLabel);

Answer 2

Упор AutoFocus срабатывает только при установленном компоненте. Когда вы возвращаетесь к A, если A все еще смонтирован (просто скрыт), то автофокус не будет работать снова.

Вы должны использовать ссылку (добавить новое состояние, например, ref здесь) и добавьте обработчик при переходе назад от B к A, чтобы запустить this.state.ref.focus()

<TextInput
          ref={ref => ref && this.setState({ref})}
          style={styles.textInput}
          textStyle={styles.inputTextStyle}
          autoFocus={true}
          placeholder='Enter Code'
          keyboard={'numeric'}
          placeholderTextColor={AppStyles.color.grey}
          value={code}
          onChangeText={this.updateCode}
          underline={false}
        />