Я использую 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 или этого модуля?