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

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

1 个答案: