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

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

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

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

но поскольку autoFocus TextInput является true, клавиатура на этом экране всплывает на экране почти мгновенно после рендера, причинив компонент для рендеринга из-за eventListener, добавленного на клавиатуру в 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.парамы?
3. Есть ли другой способ чтобы решить эту проблему, помимо применения KeyboardAvoidingView или модуль ?

12
javascript keyboard react-native react-navigation

1 ответов

вот что я сделал:

если приложение имеет "экран авторизации / входа в систему / регистрации", то:

  1. в componentWillMount добавьте KeyboardListeners как объяснено здесь:

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

  2. добавить автофокус на e-mail / номер телефона / любой другой" первый " TextInput на странице, так что, когда экран загружается, клавиатура всплывает.

  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, 
    }); 
}

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

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

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