当keyboardDismissMode为交互式时的动画视图高度[react-native]

Question

我有一个View ，点击输入时会显示一个键盘，但是当我向下拖动以隐藏键盘时，动画不会触发来调整视图的大小。

带有动画的视图

<Animated.View style={{ height: keyboardSpace }}>
  <ScrollView
    ref="addScrollView"
    keyboardShouldPersistTaps={ true }
    keyboardDismissMode="interactive"
  >
    {...}
  </ScrollView>
</Animated.View>

以及显示和隐藏键盘的功能

  _keyboardWillShow(e) {
    const { keyboardSpace } = this.state;
    const newHeight = (height - HEADER_HEIGHT) - e.endCoordinates.height;

    Animated.timing(this.state.keyboardSpace, {
      easing: Easing.inOut(Easing.ease),
      duration: 250,
      toValue: newHeight
    }).start();
  },

  _keyboardWillHide() {
    const { keyboardSpace } = this.state;

    Animated.timing(keyboardSpace, {
      easing: Easing.inOut(Easing.ease),
      duration: 250,
      toValue: height - HEADER_HEIGHT
    }).start();
  },

这是一个小视频来说明这里的问题： https : //vid.me/E3oU

您可以在这里找到源代码： https : //github.com/statiks/statiks-react-native/blob/master/sources/add/index.js

Answer 1

将Keyboard模块与keyboardDidShow和keyboardDidHide事件一起使用：

import {Keyboard} from 'react-native'

//...

componentDidMount() {
  Keyboard.addListener('keyboardDidShow', this.handleKeyboardShow)
  Keyboard.addListener('keyboardDidHide', this.handleKeyboardHide)
}