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

Я использую React-Navigation в своем приложении, и приложение состоит из StackNavigator с несколькими экранами, некоторые экраны которых имеют TextInput с autoFocus={true}

Проблема: на этих экранах при отображении компонента высота экрана устанавливается в конструкторе:

constructor(props) {
    super(props);
    this.state = { 
        height: Dimensions.get('window').height,
    };
}

Но поскольку autoFocus TextInput имеет значение true, клавиатура на этом экране появляется на экране почти мгновенно после рендеринга, заставляя компонент повторно отображать из-за eventListener, который добавлен в Keyboard в componentWillMount:

 componentWillMount() {
    this.keyboardWillShowListener = Keyboard.addListener(
        "keyboardWillShow",
        this.keyboardWillShow.bind(this)
    );
}

keyboardWillShow(e) {
    this.setState({
        height:
            Dimensions.get("window").height * 0.9 - e.endCoordinates.height
    });
    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
}

Это влияет на производительность, и я хотел бы избежать ненужного повторного рендеринга.

Вопросы:
1. Можно ли установить динамическую высоту (в зависимости от устройства) Клавиатуры в экранах экрана React-Navigation?
2. Можно ли сделать то же самое с React-Navigation state.params?
3. Есть ли другой способ решить эту проблему, помимо применения KeyboardAvoidingView или этого модуля?

Ответы

Ответ 1

Это то, что я сделал:

Если в приложении есть "Авторизация/Вход/Регистрация", тогда:

  1. В компонентеWillMount добавьте KeyboardListeners, как описано здесь:

    this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow);
this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide);

  2. Добавьте autoFocus на адрес электронной почты/номер телефона/любой другой "первый" текст на странице, чтобы при загрузке экрана всплывала клавиатура.

  3. В функции _keyboardDidShow, которая используется как KeyboardListener, выполните следующие действия:

    _keyboardDidShow(e) {
    this.props.navigation.setParams({
        keyboardHeight: e.endCoordinates.height,
        normalHeight: Dimensions.get('window').height, 
        shortHeight: Dimensions.get('window').height - e.endCoordinates.height, 
    }); 
}

    Размеры - это API React-Native, не забудьте импортировать его так же, как вы импортируете любой компонент React-Native.

  4. После этого, перейдя на следующую страницу, пройдите эти параметры и не забудьте продолжать передавать их на другие экраны, чтобы не потерять эти данные:

    this.props.navigation.navigate('pageName', { params: this.props.navigation.state.params });