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