Как получить высоту клавиатуры в 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 или модуль ?
1 ответов
вот что я сделал:
если приложение имеет "экран авторизации / входа в систему / регистрации", то:
-
в componentWillMount добавьте KeyboardListeners как объяснено здесь:
this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow); this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide);
добавить автофокус на e-mail / номер телефона / любой другой" первый " TextInput на странице, так что, когда экран загружается, клавиатура всплывает.
-
на
_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.
-
после этого, при перенаправлении на следующую страницу, передайте эти параметры и не забудьте продолжать передавать их на другие экраны, чтобы не потерять эти данные:
this.props.navigation.navigate('pageName', { params: this.props.navigation.state.params });